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>
    }
}

use radix_yew_checkbox::*;
use radix_yew_icons::CheckIcon;
use yew::prelude::*;

#[function_component]
pub fn CheckboxDemo() -> Html {
    html! {
        <form>
            <div class="flex items-center">
                <Checkbox
                    id="c1"
                    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 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

cargo add radix-yew-checkbox

Anatomy

Import all parts and piece them together.

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

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

use radix_yew_checkbox::*;
use yew::prelude::*;

#[function_component]
fn Anatomy() -> Html {
    html! {
        <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"`

Prop	Type	Default
`as_child`	`Option<Callback<CheckboxChildProps, Html>>`	-
`default_checked`	`Option<CheckedState>`	-
`checked`	`Option<CheckedState>`	-
`on_checked_change`	`Callback<bool>`	-
`disabled`	`Option<bool>`	-
`required`	`Option<bool>`	-
`name`	`Option<String>`	-
`value`	`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.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`
`force_mount`	`MaybeProp<bool>`	-

Prop	Type	Default
`as_child`	`Option<Callback<CheckboxThumbChildProps, Html>>`	-
`force_mount`	`Option<bool>`	-

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

Examples

Indeterminate

You can set the checkbox to CheckedState::Indeterminate by taking control of its state.

TODO

Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	Checks/unchecks the checkbox.

Rust Radix