An implementation of the Switch component from Radix with default styling and the css prop

The Switch component implements Radix's Switch component.

Switches are used to toggle application state between two mutually exlusive values. The Switch defaults to the "off" state unless it's rendered with the defaultChecked prop.

The Switch component should not be used to collect form data — use checkboxes or radio buttons for that. Only use Switch inside a form if it is serving its primary purpose of toggling some state with immediate effect (e.g. to conditionally render a section of the form).

<Switch />

Disabled state

The disabled stated can be set using the disabled property.

<Switch disabled />

Accessibility

Adheres to the switch role requirements

API Reference

PropTypeDefaultRequired
defaultChecked
boolean

-

-

asChild
boolean

-

-

checked
boolean

-

-

required
boolean

-

-

onCheckedChange
(checked: boolean) => void

-

-

cssCSSProperties

-

-