Quill docs

Switch

A switch group: a labelled role=group of role=switch tracks, each a binary on/off toggle. Unlike a checkbox (which submits a form value), a switch takes effect immediately. The on-state fills the track with the tone accent and slides the knob; tone is an axis.

Live demo#

Click a track (or focus it and press Space/Enter) to flip it — the knob slides and the track fills with the brand accent. Each switch renders in its initial on/off state with JS off.

Wi-Fi

Bluetooth

Airplane mode

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Wi-Fi

Bluetooth

Airplane mode

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        SwitchGroup::new("radios", /* tracks */).tone(Tone::Brand).island("radios-island")
    )

Code#

Construct the component with its builder:

SwitchGroup::new(
    "radios",
    vec![
        ("Wi-Fi".into(), true),
        ("Bluetooth".into(), false),
        ("Airplane mode".into(), false),
    ],
)
.tone(Tone::Brand)
.island("radios-island")