Switch
The Switch
component is used as an alternative to the Checkbox component. You can use it to render a single option that can be turned on or off.
Import
Usage
EDITABLE EXAMPLE
Sizes
Pass the size
prop to change the size of the Switch
.
EDITABLE EXAMPLE
Switch background color
Use the
variantColor
prop to change the checked background color of theSwitch
.variantColor
can be any color key with key50
(hover),60
(checked, focus) that exist in thetheme.colors
.That means the
red:60
exists in thetheme.colors
then can use variantColor="red".
EDITABLE EXAMPLE
Props
Name | Type | Default | Description |
---|---|---|---|
size | string | 'md' | The size of the switch. One of: 'sm', 'md', 'lg' |
variantColor | string | 'blue' | The background color of the switch when checked. |
name | string | The input name of the switch when used in a form. | |
value | string | boolean | The value of the switch. | |
children | ReactNode | The children of the switch. | |
aria-label | string | The aria-label of the switch for accessibility. | |
aria-labelledby | string | The aria-labelledby of the switch for accessibility. | |
checked | boolean | If true , set the switch to the checked state. | |
defaultChecked | boolean | If true , the checkbox will be initially checked. | |
disabled | boolean | If true , set the disabled to the invalid state. |