Checkbox

A control that allows the user to toggle between checked and not checked.

use leptos::*;
use radix_leptos_checkbox::*;
use radix_leptos_icons::CheckIcon;

#[component]
pub fn CheckboxDemo() -> impl IntoView {
    view! {
        <form>
            <div attr:class="flex items-center">
                <Checkbox
                    attr:id="c1"
                    attr:class="shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
                    default_checked=CheckedState::True
                >
                    <CheckboxIndicator attr:class="text-violet11">
                        <CheckIcon />
                    </CheckboxIndicator>
                </Checkbox>
                <label class="pl-[15px] text-[15px] leading-none text-white" for="c1">
                    Accept terms and conditions.
                </label>
            </div>
        </form>
    }
}

Features

Supports indeterminate state.
Full keyboard navigation.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

cargo add radix-leptos-checkbox

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_checkbox::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Checkbox>
            <CheckboxIndicator />
        </Checkbox>
    }
}

API Reference

Root

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`
`default_checked`	`MaybeProp<CheckedState>`	-
`checked`	`MaybeProp<CheckedState>`	-
`on_checked_change`	`Option<Callback<bool>>`	-
`disabled`	`MaybeProp<bool>`	-
`required`	`MaybeProp<bool>`	-
`name`	`MaybeProp<String>`	-
`value`	`MaybeProp<String>`	`"on"`

Data attribute	Values
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-disabled]`	Present when disabled

Indicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.