Switch
Imports
- Switch - main switch component
- SwitchLabel - label for switch
- SwitchInput - native input element for switch
Usage
Basic usage
Switch sizes
Switch comes with 4 sizes sm md lg xl
Switch with label
If we pass a string children in switch it will automatically render it inside the SwitchLabel.
Usage with FormField
Controlled switch
Customizing
To customize the switch we can use render props api to access the internal state
of the checkbox & change it's appearance as we like by composing SwitchInput,
SwitchLabel.
If you don't need to access the internal state of the switch, it's also possible to directly pass all the jsx inside of the children without the render function.
Integrations
// TBD
API Reference
Switch
Input takes all the native HTMLInputElement props plus:
Prop | Type | Default |
|---|---|---|
isDisabled | Boolean | - |
isReadOnly | Boolean | - |
isInvalid | Boolean | - |
isRequired | Boolean | - |