Toggle
The Toggle component is used to switch between two states, such as on/off.
Usage
Default
const [checked, setChecked] = useState(false);
<Toggle
checked={checked}
onChange={setChecked}
label="Enable setting"
theme="primary"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Whether the toggle is currently active or on. |
| onChange | (checked: boolean) => void | - | Callback fired when the toggle state changes. |
| label | string | - | Text label displayed next to the toggle. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Defines the visual theme of the toggle. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Specifies the size of the toggle component. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Controls the border radius of the toggle. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Applies a shadow effect to the toggle. |
| state | "success" | "error" | "warning" | - | Applies a validation state style. |
| disabled | boolean | false | Disables the toggle, preventing user interaction. |
| className | string | - | Custom class name for the toggle root element. |
| data-testid | string | "toggle" | Test ID for the toggle element, useful for testing utilities. |