Preview

CodeSource

fn view(state: &State, palette: ComponentPalette) -> Element {
    Switch::new("notifications", state.notifications, palette).render()
}

fn update(state: &mut State, action: &UiAction) {
    if let UiAction::Clicked { id } = action {
        if id == "notifications" {
            state.notifications = !state.notifications;
        }
    }
}

Examples

Each one is the library drawing it. Press, type and hover.

Switch2 / 4

CodeSource

row([
    ("Dense", ControlSize::Dense),
    ("Compact", ControlSize::Compact),
    ("Regular", ControlSize::Regular),
    ("Spacious", ControlSize::Spacious),
]
.into_iter()
.map(|(name, size)| {
    let id = format!("input-switch-{}", name.to_lowercase());
    Switch::new(id.as_str(), state.flag(&id), palette).size(size).accessibility_label(name).render()
})
.collect())

Switch3 / 4

CodeSource

row(vec![
    Switch::new("input-switch-accent", !state.flag("input-switch-accent"), palette)
        .variant(SwitchVariant::Accent)
        .size(ControlSize::Spacious)
        .accessibility_label("Show embeds")
        .render(),
    Switch::new("input-switch-accent-off", state.flag("input-switch-accent-off"), palette)
        .variant(SwitchVariant::Accent)
        .size(ControlSize::Spacious)
        .accessibility_label("Autoplay GIFs")
        .render(),
    Switch::new("input-switch-accent-ink", !state.flag("input-switch-accent-ink"), palette)
        .variant(SwitchVariant::Accent)
        .ink(cx.state.theme().accent)
        .size(ControlSize::Spacious)
        .accessibility_label("Compact mode")
        .render(),
    Switch::new("input-switch-accent-disabled", true, palette)
        .variant(SwitchVariant::Accent)
        .size(ControlSize::Spacious)
        .accessibility_label("Sync")
        .disabled()
        .render(),
])

Switch4 / 4

CodeSource

row(vec![
    Switch::new("input-switch-track", !state.flag("input-switch-track"), palette)
        .variant(SwitchVariant::Accent)
        .ink(cx.state.theme().accent)
        .track_size(50.0, 26.0)
        .accessibility_label("Developer mode")
        .render(),
    Switch::new("input-switch-track-off", state.flag("input-switch-track-off"), palette)
        .variant(SwitchVariant::Accent)
        .track_size(50.0, 26.0)
        .accessibility_label("Streamer mode")
        .render(),
])

Switch

An on/off control for a setting that takes effect at once.

Import

use limn::{Component, ControlSize, Switch, SwitchVariant};

Usage

A switch is controlled: pass whether it is on each frame, and flip your own value when it reports a click.

fn view(state: &State, palette: ComponentPalette) -> Element {
    Switch::new("notifications", state.notifications, palette).render()
}

fn update(state: &mut State, action: &UiAction) {
    if let UiAction::Clicked { id } = action {
        if id == "notifications" {
            state.notifications = !state.notifications;
        }
    }
}

Size

Switch::new("notifications", state.notifications, palette).size(ControlSize::Spacious)

Size	Track	Thumb
`Dense`	28 × 16	10
`Compact`	32 × 18	12
`Regular`, the default	36 × 20	14
`Spacious`	44 × 24	18

The thumb is always 3 pixels inside the track.

Switch::new("notifications", state.notifications, palette).track_size(50.0, 26.0)

track_size(width, height) takes a track of the host’s own size in place of a control size’s, such as a settings page’s 50 × 26: the thumb is the height less 6. The height is at least 12, and the width at least twice the height less 6, so the thumb has room to travel. Whichever of size and track_size comes last decides.

Variant

Switch::new("embeds", state.embeds, palette).variant(SwitchVariant::Accent)

Variant	On	Off
`Default`	A thumb of the palette’s surface on a track of its text	A thumb of the palette’s text on its selected fill
`Accent`	A light thumb on a track of the palette’s `link` color	The same thumb on the palette’s muted color

Accent is how chat applications draw a switch. Its thumb is the lightest color the palette has, at full strength: its text on a dark palette, its surface on a light one. Its track, on or off, is darkened where needed until the thumb stands at a contrast of 3 or more on it, the least a part that shows state needs.

Ink

Switch::new("embeds", state.embeds, palette).variant(SwitchVariant::Accent).ink(theme.accent)

ink is the track’s color while the switch is on, in either variant. On Accent a pale ink is darkened as the link color is. On Default it is used as given, so choose one its thumb, the palette’s surface, reads on.

Disabled

Switch::new("sync", true, palette).disabled().render()
Switch::new("sync", state.sync, palette).enabled(state.signed_in).render()

A disabled switch shows its value, in the colors it has enabled, and takes no pointer or focus.

Actions

Action	When
`UiAction::Clicked { id }`	The switch is flipped by pointer, Enter or Space.

Accessibility

The platform is told a switch and whether it is on, disabled or not. A switch shows no text, so the host names it, or puts it in a Form field, whose label names it.

Switch::new("wifi", wifi_on, palette).accessibility_label("Wi-Fi")

API reference

The guide covers composition, options and actions. Generate the complete Rust type and builder reference from the checkout:

cargo doc -p limn --open

Component API overview · State and actions