Component Switch

Switch

A toggle switch.

Switch can be controlled or uncontrolled:

• Controlled: provide checked + on_toggle.
• Uncontrolled: omit on_toggle and the switch manages its own state.

Example

use gpui::ElementId;
use yororen_ui::component::switch;

let view = switch()
    .key(("settings", "notifications"))
    .checked(true)
    .on_toggle(|checked, _ev, _window, _cx| {
        // ...
    });

When to use

• Modern on/off toggles in settings

API

• switch(): constructor
• id(...) / key(...): stable identity
• checked(bool)
• disabled(bool)
• tone(Hsla): override accent when checked
• on_toggle(|checked, ev, window, cx| ...)

Defaults

• Track size: 34x18
• Knob size: 14x14
• Accent when checked: tone(...) or theme.action.primary.bg

Notes

• Switch is focusable and shows a focus-visible border.

Example: Uncontrolled switch

use yororen_ui::component::switch;

let view = switch().key(("demo", "notifications")).checked(false);