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"
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes

  const [checked, setChecked] = useState(false);
  
  <Toggle theme="primary"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle theme="secondary"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle theme="tertiary"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle theme="quaternary"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

// States

  const [checked, setChecked] = useState(false);
  
  <Toggle state="success"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle state="warning"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle state="error"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle state="info"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

// Sizes

  const [checked, setChecked] = useState(false);
  
  <Toggle size="xs"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle size="small"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle size="medium"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle size="large"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

// Variants

  const [checked, setChecked] = useState(false);
  
  <Toggle variant="solid"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle variant="outline"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle variant="glass"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

// Rounding

  const [checked, setChecked] = useState(false);
  
  <Toggle rounding="none"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle rounding="medium"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle rounding="large"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

// Shadows

  const [checked, setChecked] = useState(false);
  
  <Toggle shadow="none"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle shadow="light"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

  const [checked, setChecked] = useState(false);
  
  <Toggle shadow="strong"
    checked={checked}
    onChange={setChecked}
    label="Enable setting"
    theme="primary"
  />

Interaction states

Disabled
interaction-states.tsx
// Disabled

  const [checked, setChecked] = useState(false);
  
  <Toggle disabled
    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—-