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

24 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.
errorMessageReactNodeNoprops—-
helperTextReactNodeNoprops—-