Checkbox

A control that allows the user to toggle between checked, unchecked, and optionally indeterminate states.

Accept terms and conditionsSubscribe to newsletterDisabled option

Installation

biji-ui = { version = "0.5.0", features = ["checkbox"] }

Usage

use leptos::prelude::*;
use biji_ui::components::checkbox;

#[component]
pub fn MyCheckbox() -> impl IntoView {
    view! {
        <checkbox::Root class="flex items-center justify-center w-5 h-5 rounded border border-border data-[state=checked]:bg-primary data-[state=checked]:border-primary">
            <checkbox::Indicator class="hidden data-[state=checked]:block text-primary-foreground">
                // Checkmark icon
            </checkbox::Indicator>
        </checkbox::Root>
    }
}

RootWith

Use <RootWith> when you need direct access to CheckboxState inside the children. The let:cb binding exposes cb.checked and cb.data_state as reactive signals for custom rendering.

Subscribe to newsletter

use leptos::prelude::*;
use biji_ui::components::checkbox;

#[component]
pub fn LabeledCheckbox() -> impl IntoView {
    let root_class = "flex items-center justify-center w-5 h-5 rounded border-2 border-border \
        transition-colors data-[state=checked]:bg-primary data-[state=checked]:border-primary";
    let indicator_class = "hidden data-[state=checked]:flex text-primary-foreground";

    view! {
        <label class="flex gap-3 items-center cursor-pointer select-none">
            <checkbox::RootWith class={root_class} let:cb>
                <checkbox::Indicator class={indicator_class}>
                    // Checkmark icon
                </checkbox::Indicator>
                <span class="sr-only">{move || cb.data_state.get()}</span>
            </checkbox::RootWith>
            <span class="text-sm font-medium">
                {move || /* use_checkbox() or pass cb as prop */ "Accept terms"}
            </span>
        </label>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the checkbox button.
checked	bool	false	The initial checked state of the checkbox.
indeterminate	bool	false	When true, the checkbox starts in an indeterminate state (takes precedence over checked).
disabled	bool	false	When true, prevents the checkbox from being toggled.

Indicator

Name	Type	Default	Description
class	String	""	CSS class applied to the indicator span.

Data Attributes

Attribute	Description
data-state	"checked", "unchecked", or "indeterminate". Present on Root and Indicator.
data-disabled	Present on Root and Indicator when the checkbox is disabled.

Keyboard Navigation

Key	Description
`Space`	Toggles the checkbox between checked and unchecked when focused.