Switch

A Switch component that allows users to toggle between two states, such as on and off. Typically used for settings or preferences, it provides immediate visual feedback.

function SwitchExample() {
  return <Switch size="medium" disabled={false} onChange={() => {}} />;
}

Props

checked

Typeboolean

Whether the switch is checked or not

className

Typestring

Custom class name for the switch component

disabled

Typeboolean

Whether the switch is disabled

onChange

Typesignature

Callback function when the switch state changes

size

TypeSelectorSize

Default'medium'

Size of the switch component

styles

Typestring

Custom styles to apply to the switch

thumbChildren

TypeReactReactNode

Custom content for the thumb of the switch

trackChildren

TypeReactReactNode

Custom content for the track of the switch

CSS Variables

Size

--ax-public-switch-border-size

Color

--ax-public-switch-disabled-background-color

--ax-public-switch-disabled-border-color

--ax-public-switch-focus-border-color

--ax-public-switch-outline-color

--ax-public-thumb-disabled-color

--ax-public-thumb-no-selected-color

--ax-public-thumb-selected-color

--ax-public-track-no-selected-color

--ax-public-track-selected-color