Switch

AboutCopy Anchor Link

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.

PreviewCopy Anchor Link

Last updated on 11/03/2026