KasyKasy

Switch

Live preview and documentation for the Switch component.

Preview

componentPreview.loading

About

An on/off switch with an animated track and sliding thumb, following the HeroUI pattern.

  • size: sm (32×16), md (40×20, default), or lg (48×24)
  • value / onChanged: current state and callback; a null onChanged leaves the switch disabled
  • label / description: inline text to the left of the track (optional)
  • isInvalid: paints the track red when on (error state)
  • style (KasySwitchStyle): customizes the active/inactive color, gradient, thumb color, and the icons inside the thumb (on/off)
  • semanticLabel: accessible name when there's no label (track-only switch)

KasySwitchTile wraps KasySwitch in a full-width row (label/description on the left, switch pinned to the right) — it's the standard pattern for settings screens.

Last updated on 08/23/2026

On this page