Toggle

A two-state button that can be either on or off.

use leptos::*;
use radix_leptos_icons::FontItalicIcon;
use radix_leptos_toggle::*;

#[component]
pub fn ToggleDemo() -> impl IntoView {
    view! {
        <Toggle
            attr:aria-label="Toggle italic"
            attr:class="hover:bg-violet3 color-mauve11 data-[state=on]:bg-violet6 data-[state=on]:text-violet12 shadow-blackA4 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black"
        >
            <FontItalicIcon />
        </Toggle>
    }
}

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

cargo add radix-leptos-toggle

Anatomy

Import the component.

use leptos::*;
use radix_leptos_toggle::*;

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

API Reference

Root

The toggle.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`
`default_pressed`	`MaybeProp<bool>`	-
`pressed`	`MaybeProp<bool>`	-
`on_pressed_change`	`Option<Callback<bool>>`	-
`disabled`	`MaybeProp<bool>`	-

Data attribute	Values
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	Present when disabled

Accessibility

Keyboard Interactions

Key	Description
`Space`	Activates/deactivates the toggle.
`Enter`	Activates/deactivates the toggle.

Rust Radix

Toggle

Features

Installation

Anatomy

API Reference

Root

Accessibility

Keyboard Interactions

See Also