Switch

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

use leptos::*;
use radix_leptos_switch::*;

#[component]
pub fn SwitchDemo() -> impl IntoView {
    view! {
        <form>
            <div attr:class="flex items-center">
                <label attr:class="text-white text-[15px] leading-none pr-[15px]" attr:for="airplane-mode">
                    Airplane mode
                </label>
                <Switch
                    attr:id="airplane-mode"
                    attr:class="w-[42px] h-[25px] bg-blackA6 rounded-full relative shadow-[0_2px_10px] shadow-blackA4 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-black outline-none cursor-default"
                    // style={{ '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)' }}
                >
                    <SwitchThumb attr:class="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-blackA4 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
                </Switch>
            </div>
        </form>
    }
}

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

cargo add radix-leptos-switch

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_switch::*;

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

API Reference

Root

Contains all the parts of a switch. 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<bool>`	-
`checked`	`MaybeProp<bool>`	-
`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"`
`[data-disabled]`	Present when disabled

Thumb

The thumb that is used to visually indicate whether the switch is on or off.

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

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

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions

Key	Description
`Space`	Toggles the component's state.
`Enter`	Toggles the component's state.

Rust Radix