leptos_shadcn_checkbox/
default.rs

1use leptos::{ev::Event, prelude::*};
2use leptos_style::Style;
3use leptos::wasm_bindgen::JsCast;
4
5pub const CHECKBOX_CLASS: &str = "h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground";
6
7#[component]
8pub fn Checkbox(
9    #[prop(into, optional)] checked: Signal<bool>,
10    #[prop(into, optional)] on_change: Option<Callback<bool>>,
11    #[prop(into, optional)] disabled: Signal<bool>,
12    #[prop(into, optional)] class: MaybeProp<String>,
13    #[prop(into, optional)] id: MaybeProp<String>,
14    #[prop(into, optional)] style: Signal<Style>,
15) -> impl IntoView {
16    let handle_change = {
17        let on_change = on_change.clone();
18        move |event: Event| {
19            if let Some(callback) = &on_change {
20                let target = event.target().unwrap();
21                let input = target.unchecked_into::<web_sys::HtmlInputElement>();
22                callback.run(input.checked());
23            }
24        }
25    };
26
27    let computed_class = Signal::derive(move || {
28        format!("{} {}", CHECKBOX_CLASS, class.get().unwrap_or_default())
29    });
30
31    view! {
32        <input
33            r#type="checkbox"
34            checked=move || checked.get()
35            disabled=move || disabled.get()
36            class=move || computed_class.get()
37            id=move || id.get().unwrap_or_default()
38            style=move || style.get().to_string()
39            on:change=handle_change
40        />
41    }
42}
leptos_shadcn_checkbox/default.rs

leptos_shadcn_checkbox/
default.rs
