Switch

Switch is a compound component for immediate binary settings, with a native input for semantics and state and an indicator for the visible track and thumb.

Storybook Source Figma

Root Props

Prop	Type	Default
`variant`	`SwitchVariant`	`'primary'`
Visual variant of the checkbox, for theme or context switching.
`size`	`SwitchSize`	`'md'`
Size of the checkbox input and its visual marker.
`ref`	`Ref<HTMLLabelElement>`	—
Ref to the native label element.

Also accepts all <label> attributes.

Child Parts

SwitchInput: native checked state and form participation.
SwitchIndicator: visible switch surface.

`SwitchInput`

Prop	Type	Default
`ref`	`Ref<HTMLInputElement>`	—
Ref forwarded to the underlying native `<input>` element

Also accepts all <input> attributes.

`SwitchIndicator`

Also accepts all <div> attributes.

Types

SwitchProps
SwitchInputProps
SwitchIndicatorProps
SwitchVariant
SwitchSize

State Model

The visible root mostly provides size and variant context.
Checked and disabled semantics typically live on SwitchInput.
useSwitchContext is available for advanced wrappers and custom compositions.