Toggle

The Toggle component is used to switch between two states, such as on/off.

Usage & Examples

Default

default.tsx

const [checked, setChecked] = useState(false);

<Toggle
  checked={checked}
  onChange={setChecked}
  label="Enable setting"
  theme="primary"
/>

Props API

21 props
Columns
Toggle props API
Default
Description
aria-describedbystringNoaria—References the id of an element that describes the toggle, such as hint text or supporting content.
aria-disabledbooleanNoaria—Explicitly communicates disabled state to assistive technologies. Normally inferred from `disabled`, but exposed for flexibility.
aria-errormessagestringNoaria—References the id of an element containing an error message.
aria-invalidbooleanNoaria—Indicates whether the current value is invalid.
aria-labelstringNoaria—Accessible label for screen readers. Best used when no visible label is rendered.
aria-labelledbystringNoaria—References the id of an element that labels the toggle. Takes precedence over aria-label when provided.
checkedbooleanYesprops—Indicates whether the toggle is in the "on" (`true`) or "off" (`false`) state.
classNamestringNostyling—Additional CSS class names for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseIf true, disables user interaction with the toggle.
glassbooleanNopropsconfigured default glass setting (fallback: false)Applies a translucent frosted-glass treatment to the toggle track.
idstringNoprops—Optional id for the toggle button. If not provided, one will be generated automatically.