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
| Type | Description | |
|---|---|---|
| aria-describedby | string | References the id of an element that describes the toggle, such as hint text or supporting content. |
| aria-disabled | boolean | Explicitly communicates disabled state to assistive technologies. Normally inferred from `disabled`, but exposed for flexibility. |
| aria-errormessage | string | References the id of an element containing an error message. |
| aria-invalid | boolean | Indicates whether the current value is invalid. |
| aria-label | string | Accessible label for screen readers. Best used when no visible label is rendered. |
| aria-labelledby | string | References the id of an element that labels the toggle. Takes precedence over aria-label when provided. |
| checked | boolean | Indicates whether the toggle is in the "on" (`true`) or "off" (`false`) state. |
| className | string | Additional CSS class names for custom styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| disabled | boolean | If true, disables user interaction with the toggle. |
| id | string | Optional id for the toggle button. If not provided, one will be generated automatically. |
| label | string | Optional label to be displayed next to the toggle switch. |
| onChange | (checked: boolean) => void | Callback that is invoked when the toggle's state changes. Receives the new boolean state as an argument. |
| rounding | RoundingType | Rounding applied to the toggle. "none" | "small" | "medium" | "large" | "full" |
| shadow | ShadowType | Shadow style applied to the toggle. "none" | "light" | "medium" | "strong" | "intense" |
| size | SizeType | Size variant for the toggle. "xs" | "small" | "medium" | "large" | "xl" |
| state | StateType | State of the toggle. "" | "success" | "error" | "warning" | "disabled" |
| tabIndex | number | Optional tab index for focus management. |
| theme | ThemeType | Theme used for styling the toggle. "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |