Skip to main content

Toggle

The toggle mimics a physical switch that allows users to turn things On or Off.

Example

On
Off
Off
On
Different states of toggle on a default theme

Best practices

Use a toggle for binary operations that become effective immediately after the user changes it. For example, use a toggle to turn services or hardware components on or off.

Do

  • Only replace the On and Off labels if there are more specific labels for the setting. If there are short (3-4 characters) labels that represent binary opposites that are more appropriate for a particular setting, use them. For example, you might use "Show/Hide" if the setting is "Show images." Using more specific labels can help when localizing the UI.

Don’t

  • Don’t use toggle if the user will have to do something else or go somewhere else in order to experience its effect. If any extra step is required for changes to be effective, you should use a checkbox and corresponding "Apply" button instead of a toggle.

Also known as

Toggle button
Toggle switch

Related

Checkbox
Radio
Select button

Options

  • Disabled: Add a f-disabled class name to create a disabled toggle switch.
  • Selected: To toggle on set aria-checked="true".
  • Unselected: To toggle off set aria-checked="false".

Development

  • Schema definition: The toggle schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Toggle selected

On
<div class="c-toggle">
    <label class="c-label" id="c-label-1" for="example-1">Control label (selected)</label>
    <button id="example-1" name="example-1" role="checkbox" aria-checked="true" aria-labelledby="c-label-1 c-state-label-1"></button>
    <span data-on-string="On" data-off-string="Off" id="c-state-label-1">On</span>
</div>

Toggle unselected

Off
<div class="c-toggle">
    <label class="c-label" id="c-label-2" for="example-2">Control label (unselected)</label>
    <button id="example-2" name="example-2" role="checkbox" aria-checked="false" aria-labelledby="c-label-2 c-state-label-2"></button>
    <span data-on-string="On" data-off-string="Off" id="c-state-label-2">Off</span>
</div>

Toggle disabled

Off
<div class="c-toggle f-disabled">
    <label class="c-label" id="c-label-3" for="example-3">Control label (disabled)</label>
    <button id="example-3" name="example-3" role="checkbox" aria-checked="false" aria-labelledby="c-label-3 c-state-label-3" disabled="disabled"></button>
    <span data-on-string="On" data-off-string="Off" id="c-state-label-3">Off</span>
</div>

Toggle disabled and selected

On
<div class="c-toggle f-disabled">
    <label class="c-label" id="c-label-4" for="example-4">Control label (disabled and selected)</label>
    <button id="example-4" name="example-4" role="checkbox" aria-checked="true" aria-labelledby="c-label-4 c-state-label-4" disabled="disabled"></button>
    <span data-on-string="On" data-off-string="Off" id="c-state-label-4">On</span>
</div>