Toggle

Toggles (switches) allow users to turn a setting on or off instantly.

Usage

Use toggles for binary settings that take effect immediately. For settings requiring confirmation, use a checkbox instead.

Basic Toggle

<label class="df-toggle">
  <input type="checkbox" class="df-toggle__input">
  <span class="df-toggle__switch"></span>
</label>

With Label

Enable notificationsDark mode

<label class="df-toggle df-toggle--with-label">
  <input type="checkbox" class="df-toggle__input">
  <span class="df-toggle__switch"></span>
  <span class="df-toggle__label">Enable notifications</span>
</label>

Sizes

<label class="df-toggle df-toggle--sm">...</label>
<label class="df-toggle">...</label>
<label class="df-toggle df-toggle--lg">...</label>

States

Disabled

With Description

Email notificationsReceive emails about new features and updates

Marketing emailsReceive promotional offers and newsletters

<div class="df-toggle-item">
  <div class="df-toggle-item__content">
    <span class="df-toggle-item__label">Email notifications</span>
    <span class="df-toggle-item__desc">Receive emails about updates</span>
  </div>
  <label class="df-toggle">
    <input type="checkbox" class="df-toggle__input">
    <span class="df-toggle__switch"></span>
  </label>
</div>

Accessibility

• Use proper <label> elements
• Ensure keyboard accessibility (Space to toggle)
• Provide clear focus states
• Consider adding role="switch" for screen readers

Best Practices

• Use for settings with immediate effect
• Keep labels concise and clear
• Position consistently (usually to the right)
• Use checkboxes for forms requiring submission

API Reference

Classes

Class	Description
df-toggle	Base toggle class
df-toggle--sm	Small size
df-toggle--lg	Large size
df-toggle--with-label	Toggle with text label
df-toggle__input	Hidden input
df-toggle__switch	Visual switch
df-toggle__label	Text label