Toggle Switch

iOS-style toggle switches for boolean on/off states. A more intuitive alternative to checkboxes for settings and preferences.

Basic Example

A toggle switch consists of a hidden checkbox input, a track, and a thumb that slides between states.

Enable notifications

HTML

<label class="focus-toggle">
  <input type="checkbox" class="focus-toggle-input">
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Enable notifications</span>
</label>

Checked State

Add the checked attribute to show the toggle in its "on" state.

Off On

HTML

<label class="focus-toggle">
  <input type="checkbox" class="focus-toggle-input">
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Off</span>
</label>

<label class="focus-toggle">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">On</span>
</label>

Size Variants

Three sizes available: small (.focus-toggle-sm), default, and large (.focus-toggle-lg).

Small Default Large

HTML

<label class="focus-toggle focus-toggle-sm">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Small</span>
</label>

<label class="focus-toggle">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Default</span>
</label>

<label class="focus-toggle focus-toggle-lg">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Large</span>
</label>

Color Variants

Semantic colors for different contexts: success, danger, warning, secondary.

Primary (default) Success Danger Warning Secondary

HTML

<label class="focus-toggle">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Primary (default)</span>
</label>

<label class="focus-toggle focus-toggle-success">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Success</span>
</label>

<label class="focus-toggle focus-toggle-danger">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Danger</span>
</label>

<label class="focus-toggle focus-toggle-warning">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Warning</span>
</label>

<label class="focus-toggle focus-toggle-secondary">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Secondary</span>
</label>

Bi-color Toggle

Shows red when off and green when on—perfect for clear enable/disable states.

Disabled Enabled

HTML

<label class="focus-toggle focus-toggle-bicolor">
  <input type="checkbox" class="focus-toggle-input">
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Disabled</span>
</label>

<label class="focus-toggle focus-toggle-bicolor">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Enabled</span>
</label>

Style Variants

Different visual styles for various design needs.

Square Toggle

Square corners

HTML

<label class="focus-toggle focus-toggle-square">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Square corners</span>
</label>

Outline Toggle

Off On

HTML

<label class="focus-toggle focus-toggle-outline">
  <input type="checkbox" class="focus-toggle-input">
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Off</span>
</label>

<label class="focus-toggle focus-toggle-outline">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">On</span>
</label>

Icons Toggle

Shows check/cross icons inside the track.

Off On

HTML

<label class="focus-toggle focus-toggle-icons">
  <input type="checkbox" class="focus-toggle-input">
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Off</span>
</label>

<label class="focus-toggle focus-toggle-icons">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">On</span>
</label>

Slim Toggle

A minimal, thinner track design.

Slim style

HTML

<label class="focus-toggle focus-toggle-slim">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Slim style</span>
</label>

Disabled State

Add disabled to the input to prevent interaction.

Disabled off Disabled on

HTML

<label class="focus-toggle">
  <input type="checkbox" class="focus-toggle-input" disabled>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Disabled off</span>
</label>

<label class="focus-toggle">
  <input type="checkbox" class="focus-toggle-input" checked disabled>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Disabled on</span>
</label>

Label Position

Place the label on the left with .focus-toggle-label-left.

Label on left

HTML

<label class="focus-toggle focus-toggle-label-left">
  <input type="checkbox" class="focus-toggle-input" checked>
  <span class="focus-toggle-track">
    <span class="focus-toggle-thumb"></span>
  </span>
  <span class="focus-toggle-label">Label on left</span>
</label>

Common Use Cases

Settings Panel

Notification Settings

Email notifications

Receive updates via email

Push notifications

Browser push alerts

Marketing emails

Promotional content

CSS Classes Reference

Class	Description
`.focus-toggle`	Container wrapper
`.focus-toggle-input`	Hidden checkbox input
`.focus-toggle-track`	The sliding track background
`.focus-toggle-thumb`	The circular knob
`.focus-toggle-label`	Optional text label
`.focus-toggle-sm`	Small size
`.focus-toggle-lg`	Large size
`.focus-toggle-success`	Green when checked
`.focus-toggle-danger`	Red when checked
`.focus-toggle-warning`	Amber when checked
`.focus-toggle-secondary`	Gray when checked
`.focus-toggle-bicolor`	Red when off, green when on
`.focus-toggle-square`	Square corners style
`.focus-toggle-outline`	Outline/border style
`.focus-toggle-icons`	Shows check/cross icons
`.focus-toggle-slim`	Thin track style
`.focus-toggle-label-left`	Label on left side