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), orlg(48×24)value/onChanged: current state and callback; a nullonChangedleaves the switch disabledlabel/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 nolabel(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

