The Switch component is used as an alternative for the
Checkbox component. You can switch between enabled or
disabled states.
Switch must always be accompanied by a label, and follows the same keyboard
workflow as a Checkbox.
Pass the size prop to change the size of the Switch.
You can change the checked background color of the Switch by passing the
color prop.
| Name | Type | Description | Default |
|---|---|---|---|
| colorScheme | string | - | |
| css | Interpolation<{}> | The emotion's css style object | - |
| defaultIsChecked | boolean | If `true`, the checkbox will be initially checked. | - |
| id | string | id assigned to input | - |
| isChecked | boolean | If `true`, the checkbox will be checked. You'll need to pass `onChange` to update its value (since it is now controlled) | - |
| isDisabled | boolean | If `true`, the checkbox will be disabled | - |
| isFocusable | boolean | If `true` and `isDisabled` is passed, the checkbox will remain tabbable but not interactive | - |
| isInvalid | boolean | If `true`, the checkbox is marked as invalid. Changes style of unchecked state. | - |
| isReadOnly | boolean | If `true`, the checkbox will be readonly | - |
| isRequired | boolean | If `true`, the checkbox input is marked as required, and `required` attribute will be added | - |
| name | string | The name of the input field in a checkbox (Useful for form submission). | - |
| onChange | ((event: ChangeEvent<HTMLInputElement>) => void) | The callback invoked when the checked state of the `Checkbox` changes.. | - |
| orientation | "horizontal" | "vertical" | - | |
| size | string | - | |
| styleConfig | Record<string, any> | - | |
| value | string | number | The value to be used in the checkbox input. This is the value that will be returned on form submission. | - |
| variant | string | - |