NetApp logo
LUCI Version 4.0.0

Switches

A switch is used to enable or disable a mode, feature or function. Toggle switches have an immediate effect on the system.

Standard Switch

Use labels such as “on” and “off” or “enable” and “disable” to communicate the state of the toggle switch. To interact with a toggle switch, the user can click the state label or alternately press the spacebar.

Label Right (Default)

Copied to clipboard 
<label class="luci-switch" for="luci-switch-96152">
    <input class="luci-switch__input" id="luci-switch-96152" name="luci-switch-96152-name" type="checkbox" />
    <span class="luci-switch__label">
        <span class="luci-switch__text">Default (Off)</span>
        <span class="luci-switch__text-checked">Default (On)</span>
    </span>
    <span aria-hidden="true" class="luci-switch__visual"></span>
</label>

Label Left

Copied to clipboard 
<label class="luci-switch luci-switch--label-left" for="luci-switch-63301">
    <input class="luci-switch__input" id="luci-switch-63301" name="luci-switch-63301-name" type="checkbox" />
    <span class="luci-switch__label">
        <span class="luci-switch__text">Default (Off)</span>
        <span class="luci-switch__text-checked">Default (On)</span>
    </span>
    <span aria-hidden="true" class="luci-switch__visual"></span>
</label>

Small Switch

A small switch should only be used in data tables / grids as illustrated below.

Folder Recent Version Add to Restore Queue
vFolder-16 Dec 31, 2018 11:59 PM
vFolder-16 Dec 31, 2018 11:59 PM
vFolder-16 Dec 31, 2018 11:59 PM

With Label

Copied to clipboard 
<label class="luci-switch luci-switch--compressed" for="luci-switch-21019">
    <input class="luci-switch__input" id="luci-switch-21019" name="luci-switch-21019-name" type="checkbox" />
    <span class="luci-switch__label">
        <span class="luci-switch__text">Label (Off)</span>
        <span class="luci-switch__text-checked">Label (On)</span>
    </span>
    <span aria-hidden="true" class="luci-switch__visual"></span>
</label>

Without Label

Copied to clipboard 
<label class="luci-switch luci-switch--compressed luci-switch--label-hidden" for="luci-switch-6984">
    <input class="luci-switch__input" id="luci-switch-6984" name="luci-switch-6984-name" type="checkbox" />
    <span class="luci-switch__label">
        <span class="luci-switch__text">Label (Off)</span>
        <span class="luci-switch__text-checked">Label (On)</span>
    </span>
    <span aria-hidden="true" class="luci-switch__visual"></span>
</label>

Toggle Switch Group

Toggle switches can be grouped, similar to how checkboxes and radio buttons can be grouped. Group toggle switches should be wrapped in a fieldset element with right labels for each switch.

Toggle Switch Group Stacked

Copied to clipboard 
<fieldset class="luci-switch__group">
    <label class="luci-switch" for="default-25718">
        <input class="luci-switch__input" id="default-25718" name="default-25718-name" type="checkbox" checked />
        <span class="luci-switch__label">
            <span class="luci-switch__text">Switch Label (Off)</span>
            <span class="luci-switch__text-checked">Switch Label (On)</span>
        </span>
        <span aria-hidden="true" class="luci-switch__visual"></span>
    </label>
    <label class="luci-switch" for="default-63454">
        <input class="luci-switch__input" id="default-63454" name="default-63454-name" type="checkbox" />
        <span class="luci-switch__label">
            <span class="luci-switch__text">Switch Label (Off)</span>
            <span class="luci-switch__text-checked">Switch Label (On)</span>
        </span>
        <span aria-hidden="true" class="luci-switch__visual"></span>
    </label>
    <label class="luci-switch" for="default-4856">
        <input class="luci-switch__input" id="default-4856" name="default-4856-name" type="checkbox" checked />
        <span class="luci-switch__label">
            <span class="luci-switch__text">Switch Label (Off)</span>
            <span class="luci-switch__text-checked">Switch Label (On)</span>
        </span>
        <span aria-hidden="true" class="luci-switch__visual"></span>
    </label>
    <label class="luci-switch" for="default-8143">
        <input class="luci-switch__input" id="default-8143" name="default-8143-name" type="checkbox" />
        <span class="luci-switch__label">
            <span class="luci-switch__text">Switch Label (Off)</span>
            <span class="luci-switch__text-checked">Switch Label (On)</span>
        </span>
        <span aria-hidden="true" class="luci-switch__visual"></span>
    </label>
</fieldset>

Do’s and Don’ts

Do

  • Use a toggle switch if a physical switch could perform a similar function. For example a light switch.
  • Use a toggle switch if the change to the system will be immediate.
  • Include a label for your toggle switch.

Don’t

  • Do not use a toggle switch if a “submit” or “save” is required to change the system.
  • Do not use for progressive disclosure (e.g., to reveal or other associated inputs). Use checkboxes or radio buttons instead.

Accessibility

  • When the .luci-switch__label element isn't present, the checkbox input element should have an aria-label attribute with a descriptive value.
  • The visibility of the .luci-switch__text and .luci-switch__text-checked is determined via CSS in order to reflect the current state of the switch. The .luci-switch__text-checked element is optional and contains the label for the on/checked state.

Class Reference

Class Applies to Outcome

.luci-switch--label-left

.luci-switch

Positions the label to the left of the switch toggle visual element.

.luci-switch--label-hidden

.luci-switch

Accessibly hides the label so it’s still readable by assistive technologies.

.luci-switch--compressed

.luci-switch

Reduces the size of the switch toggle visual element, decreases the font size of the label and compresses the spacing between elements.

.luci-switch--inline

.luci-switch

Displays switch as inline-flex.