Skip to main content
Pricing

Toggle

Free

An on/off switch for binary settings that take immediate effect — no form submission needed. The toggle slides visually between states and uses brand colour when active. Pair with a label and optional description text.

8 variants

Checked
On
Size Default
On
Size Small

Variants

VariantDescriptionWhen to use
DefaultStandard toggle switch with on/off states.Use for settings that should take effect immediately on toggle.
With LabelToggle paired with a text label and optional description.Use in settings panels where the toggle needs contextual explanation.
SmallCompact toggle for dense UIs like table rows or toolbars.Use when vertical space is limited but the setting still needs a toggle.
LargeLarger toggle for touch-primary interfaces and prominent settings.Use on mobile or for settings that deserve extra visual emphasis.

Usage Guidelines

Do

Use for settings that take effect immediately.

Don't

Use for form inputs that require a submit action — use Checkbox instead.

Do

Pair with a label and description text.

Don't

Place toggles without labels — users won't know what they're toggling.

Do

Show the current state clearly — on = brand colour, off = neutral.

Don't

Use for triggering actions — use a Button instead.

Code

HTML
<label class="lex-toggle-row">
  <span class="lex-toggle-row__text">
    <span class="lex-toggle-row__label">Dark mode</span>
    <span class="lex-toggle-row__description">
      Switch between light and dark colour schemes.
    </span>
  </span>
  <button class="lex-toggle" role="switch" aria-checked="true">
    <span class="lex-toggle__thumb" />
  </button>
</label>
CSS Custom Properties
.lex-toggle {
  width: var(--lex-toggle-width, 44px);
  height: var(--lex-toggle-height, 24px);
  border-radius: var(--lex-radius-pill);
  background: var(--lex-toggle-bg);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 200ms ease;
}

.lex-toggle[aria-checked="true"] {
  background: var(--lex-toggle-bg-checked);
}

.lex-toggle__thumb {
  width: var(--lex-toggle-thumb-size, 20px);
  height: var(--lex-toggle-thumb-size, 20px);
  border-radius: 50%;
  background: var(--lex-toggle-thumb-color);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 200ms ease;
}

.lex-toggle[aria-checked="true"] .lex-toggle__thumb {
  transform: translateX(20px);
}
React
// Using Lexicon CSS classes with React

export function DarkModeToggle() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Toggle
      checked={enabled}
      onChange={setEnabled}
      label="Dark mode"
      description="Switch between light and dark colour schemes."
    />
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-toggle-width——width
--lex-toggle-height——height
--lex-toggle-bg——bg
--lex-toggle-bg-checked——checked
--lex-toggle-thumb-size——size
--lex-toggle-thumb-color——color

Accessibility

  • Use role="switch" with aria-checked="true" or "false".
  • Label must be associated via aria-labelledby or wrapping <label>.
  • Togglable with the Space key.
  • State changes are announced to screen readers automatically.

Keyboard Interactions

SpaceToggles between on and off.
TabMoves focus to the next focusable element.