Skip to content
Clicky UI

Switch

On/off toggle switch (role="switch"). Density-aware: the track and knob scale via density-* variants, so it shrinks/grows with the active data-density. The knob is positioned with flex alignment (no translate math), so it stays centered at every size.

Source

Import

Section titled “Import”
import { Switch } from "@flanksource/clicky-ui/components";

Demos

Section titled “Demos”
Default · Open in Storybook
With Label · Open in Storybook
Disabled · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Section titled “Props”
Prop Type Default Description
aria-label string — Accessible name when no visible `label` is given.
checked* boolean — Current on/off state.
className string — Classes applied to the wrapper (or the track when there is no label).
disabled boolean — Disable interaction.
label ReactNode — Optional clickable label rendered after the track.
onChange* (…) => void — Called with the next state when toggled.