tablo_ui/components/primitives/
checkbox.rs

1// SYNC: topcoat-ui-registry@0.11.0 sha256:fb7cb8f77818fe9a76f62b0f705494a5e5a000de9b6a49d05cca973b028abf2d — do not hand-edit. Sync via `cargo xtask sync-topcoat-ui` (ADR-0007).
2use topcoat::{
3    Result,
4    icon::{icon, iconify::iconify_icon},
5    view::{Attributes, StaticClass, View, attributes, class, component, view},
6};
7
8/// Classes for the native checkbox input and its checked state.
9const CHECKBOX: StaticClass = class!(
10    "peer size-4 shrink-0 appearance-none rounded-[4px] border border-border",
11    "bg-background transition-colors outline-none",
12    "checked:border-primary checked:bg-primary",
13    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
14    "focus-visible:ring-offset-background disabled:pointer-events-none",
15);
16
17/// A styled native checkbox.
18///
19/// Pass input attributes and event handlers through `attrs`. Classes apply to the
20/// wrapper, while other attributes go on the `<input>`. Use `checked` for the initial
21/// state. The indeterminate state requires setting a DOM property and has no custom
22/// styling.
23///
24/// ```ignore
25/// view! {
26///     <div class="flex items-center gap-2">
27///         let terms = element_id(cx);
28///         checkbox(attrs: attributes! { id=(&terms) name="terms" checked="" })
29///         label(attrs: attributes! { for=(&terms) }, "Accept terms")
30///     </div>
31/// }
32/// ```
33#[component]
34pub async fn checkbox(#[default] mut attrs: Attributes) -> Result<impl View> {
35    // The checkmark cannot be drawn by the `<input>` itself, which renders no
36    // children or pseudo-elements: it is a sibling icon overlaid on the
37    // control, revealed by the input's `peer` state while checked.
38    Ok(view! {
39        <span
40            class=(class!(
41                "peer relative inline-flex shrink-0 has-[:disabled]:opacity-50",
42                attrs.remove("class"),
43            ))
44        >
45            <input type="checkbox" class=(CHECKBOX) (attrs)>
46            icon(
47                data: iconify_icon!("lucide:check"),
48                attrs: attributes! {
49                    class="pointer-events-none absolute inset-0 m-auto size-3.5 \
50                        text-primary-foreground opacity-0 peer-checked:opacity-100"
51                }
52            )
53        </span>
54    })
55}
tablo_ui/components/primitives/checkbox.rs

tablo_ui/components/primitives/
checkbox.rs
