CSS-Only

Toggle Switch

Binary on/off toggle switch for settings and preferences. Uses native checkbox for full accessibility and keyboard support.

Example

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

Usage Patterns

Wrapper Label Pattern

The simplest approach - wrap everything in a label:

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

Explicit Label Pattern

Use when you need separate label and toggle positioning:

<label for="darkmode">Dark mode</label>
<span class="omni-toggle">
  <input type="checkbox" id="darkmode" name="darkmode">
  <span class="omni-toggle-track"></span>
</span>

Sizes

Use data-size to adjust toggle dimensions:

<span class="omni-toggle" data-size="sm">...</span>
<span class="omni-toggle">...</span>
<span class="omni-toggle" data-size="lg">...</span>

States

Checked and Unchecked

Disabled

Color Variants

Default (Primary)

Uses primary brand color when checked:

Red/Green Variant

Use data-variant="red-green" for toggles representing danger/success states (e.g., power, system status):

<span class="omni-toggle" data-variant="red-green">
  <input type="checkbox" name="power">
  <span class="omni-toggle-track"></span>
</span>

Real-World Example

Settings panel with multiple toggle switches:

Account Settings

Email notifications

Receive updates about your account

Two-factor authentication

Extra security for your account

Public profile

Allow others to view your profile

Marketing emails

Receive promotional content

API Reference

Data Attributes

Attribute Values Default Description
data-size sm, md, lg md Toggle dimensions
data-variant red-green — Color variant for danger/success states

CSS Classes

Class Element Description
.omni-toggle <span> Required wrapper for the toggle switch
.omni-toggle-track <span> Required visual track (contains background and thumb)
.omni-toggle-label <label> Optional wrapper for toggle + label combination

HTML Structure

<!-- Required structure -->
<span class="omni-toggle">
  <input type="checkbox" name="example">
  <span class="omni-toggle-track"></span>
</span>

Accessibility

  • Uses native <input type="checkbox"> for full keyboard support
  • Screen readers announce as "checkbox" which is functionally correct for binary toggles
  • Can be toggled with Space key when focused
  • Focus visible indicators automatically provided by browser
  • All toggles MUST have associated labels (either wrapper pattern or for attribute)
  • Disabled state prevents interaction and reduces opacity
  • Respects prefers-reduced-motion for smooth transitions
  • Color is not the only indicator - position of thumb also conveys state

Best Practices

  • Always provide a descriptive label - never use a standalone toggle
  • Use name attribute for form submission
  • Use id attribute when using explicit labeling pattern
  • Consider using data-variant="red-green" for critical system states
  • For settings panels, provide additional descriptive text below the label