Switch
The
Switch component allows users to create a switch to represent boolean states.Basic usage
You can access the value of a
Switch using its component state.Disabling
A
Switch can be disabled using the defaultDisabled prop.Inner labels
Inner labels for the checked and unchecked states of the
Switch can be added through the onLabel
and offLabel props.Setting values
If you need to update values programmatically, you should use the
setChecked and setDisabled
functions on the state.Component API
| Name | Description | Default |
|---|---|---|
| id | string The ID referenced by the global component state. | |
| defaultDisabled | boolean Whether the switch is initially disabled. | |
| defaultChecked | boolean Whether the switch is initially checked. | |
| validate | ((value: boolean) => string | undefined) | Array<(value: boolean) => string | undefined> A single function or an array of functions that validate the input value. | |
| required | boolean Adds red asterisk on the right side of label and sets required on input element | false |
| onChange | (value: boolean) => void Callback when checked state changes when using as a controlled component. Prefer
using the global component state. | |
| size | "xs" | "sm" | "md" | "lg" | "xl" Size of the switch. | |
| color | "primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}` Color of the switch. | |
| label | React.ReactNode Switch label. Can be a string or a React component. | |
| description | React.ReactNode Description displayed below the switch. Can be a string or a React component. | |
| checked | boolean Whether the switch is checked when using as a controlled component. Prefer
using defaultChecked and the global component state. | |
| error | React.ReactNode Displays error message after the switch input. Can be a string or a React component. | |
| offLabel | React.ReactNode Inner label when the switch is unchecked. Can be a string or a React component. | |
| onLabel | React.ReactNode Inner label when the switch is checked. Can be a string or a React component. |
State API
| Name | Description |
|---|---|
| checked | boolean Whether the switch is checked |
| setChecked | (checked: boolean) => void Sets the value of the switch |
| disabled | boolean Whether the switch is disabled |
| setDisabled | (disabled?: boolean) => void Sets the disabled value of the switch. If the `disabled` value is not provided, the switch will be disabled |