Switch
A control that allows the user to toggle between checked and not checked.
This component is not yet updated to Leptos 0.7+.
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. |