Switch v0.24.0+

A switch is used when a user needs to make a binary decision, such as, turning a setting on or off, or setting a preference enabling or disabling a device or system.

Default Switch (no labels)

<hx-switch-control>
  <input type="checkbox" id="switchNoneTest" />
  <label for="switchNoneTest">
    <hx-switch aria-labelledby="switchNoneTest"></hx-switch>
  </label>
</hx-switch-control>

Switch with on/off labels

The label can be overridden to provide a different label (for i18n support). The character width is limited to 2-3 characters.

<hx-switch-control>
  <input type="checkbox" id="switchOnOffTest" />
  <label for="switchOnOffTest">
    <hx-switch
      onlabel="on"
      offlabel="off"
      aria-labelledby="switchOnOffTest">
    </hx-switch>
  </label>
</hx-switch-control>

Switch with yes/no labels

The label can be overridden to provide a different label (for i18n support). The character width is limited to 2-3 characters.

<hx-switch-control>
  <input type="checkbox" id="switchYesNoTest" />
  <label for="switchYesNoTest">
    <hx-switch
      onlabel="yes"
      offlabel="no"
      aria-labelledby="switchYesNoTest">
    </hx-switch>
  </label>
</hx-switch-control>

Disabled Switch

<hx-switch-control>
  <input
    type="checkbox"
    id="switchDisabledTest"  />
  <label for="switchDisabledTest">
    <hx-switch
      onlabel="on"
      offlabel="off"
      aria-labelledby="switchDisabledTest">
    </hx-switch>
  </label>
</hx-switch-control>

Error Switch

<hx-switch-control>
  <input
    type="checkbox"
    id="switchErrorTest"  />
  <label for="switchErrorTest">
    <hx-switch
      onlabel="on"
      offlabel="off"
      aria-labelledby="switchErrorTest">
    </hx-switch>
  </label>
</hx-switch-control>

See Also