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

use radix_yew_switch::*;
use yew::prelude::*;

#[function_component]
pub fn SwitchDemo() -> Html {
    html! {
        <form>
            <div class="flex items-center">
                <label class="text-white text-[15px] leading-none pr-[15px]" for="airplane-mode">
                    {"Airplane mode"}
                </label>
                <Switch
                    id="airplane-mode"
                    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 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

cargo add radix-yew-switch

Anatomy

Import all parts and piece them together.

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

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

use radix_yew_switch::*;
use yew::prelude::*;

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

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

Prop	Type	Default
`as_child`	`Option<Callback<SwitchThumbChildProps, Html>>`	-

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