checked | booleanControlled switch state. Pair with onCheckedChange. | Default— |
|---|
defaultChecked | booleanInitial ON/OFF state in uncontrolled usage. | Defaultfalse |
|---|
onCheckedChange | (checked: boolean) => voidReceives the next state when the switch is activated. Disabled switches do not fire this callback. | Default— |
|---|
size | "sm" | "md" | "lg" | numberVisual width: 120 / 180 / 240px, or a custom number clamped to 64-600px. Shrinks to fit its container. | Default"md" |
|---|
disabled | booleanDisables pointer and keyboard activation and softens the colors. | Defaultfalse |
|---|
baseColor | stringBlue housing and animated ray color. Accepts CSS colors. | Default"#0955ff" |
|---|
offColor | stringLeft OFF paddle color. | Default"#ff8619" |
|---|
onColor | stringRight ON paddle color. | Default"#ffda00" |
|---|
showRays | booleanShow the three feedback strokes on hover, keyboard focus and after toggling. Reduced motion uses static strokes. | Defaulttrue |
|---|
aria-label | stringAccessible switch name; describe the setting controlled by this switch. | Default"Power" |
|---|
className / style | string / CSSPropertiesStandard button presentation props. The artwork is transparent and uses no external assets. | Default— |
|---|