Skip to content

Forms and settings

Switch

components/ui/switch

On and off, with a click that pitches with the state.

Switch live demo

Spatial audio

Place sounds in the stereo field

Haptics

Pair each sound with a vibration

Craft notes

  • A damped wooden click that pitches up for on and down for off
  • The thumb travels on a slightly overshooting curve over 250 ms
  • Setting rows make the whole line a click target while the switch keeps role="switch"

Play it

Flip it quickly a few times, then use Space from the keyboard.

Sounds: toggle

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

  • Setting row

    label="..." description="..."

    Label, hint and switch as one target.

    Spatial audio

    Place sounds in the stereo field

    Haptics

    Pair each sound with a vibration

  • On its own

    label="Spatial audio"

    With an accessible name instead of a visible label.

  • Disabled

    disabled

    Locked in its current state.

  • Silent

    silent

    Mutes this instance only.

siyo, home

Components and sounds for the scntix app. Rounded surfaces, pill controls, one high-contrast accent and a sound for every state.

scntix/siyo ยท components and sounds for the scntix app

Every sound on this site is synthesized in your browser. Nothing is downloaded.