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
Prop | Type | Default | Required |
---|---|---|---|
defaultChecked | boolean | - | - |
asChild | boolean | - | - |
checked | boolean | - | - |
required | boolean | - | - |
onCheckedChange | (checked: boolean) => void | - | - |
css | CSSProperties | - | - |