Overview

Switches are simple elements to wrap checkbox and radio elements. In a17t, they are left intentionally unstyled in order to maintain cross-browser compatibility. (In Bootstrap and Bulma, checkboxes and radio buttons are left unstyled for the same reason.)

Using the a17t switch is easy. Apply it to a parent element — usually a label — that contains both your <input> (whether it’s of type="radio" or type="checkbox) followed by a <span> (or some other inline element) that contains the text you’d like shown next to the input. Then, a17t will make sure that the alignment and padding is correct.

Considerations

Vertical layouts — Because switches are inline-block elements, placing them back-to-back in your code will cause them to be stacked horizontally. To achieve a vertical layout, set the switch element to display: block using CSS (or add the Tailwind utility selector .block).

Variants

Switches can be applied to either checkbox or radio inputs. If the disabled attribute is set on the <input>, the entire switch — label, input, and all — will be presented as disabled.

Accessibility

Be mindful of label associations. Because the a17t switch element specifies that the label be the parent of the <input>, browsers and screenreaders will automatically associate the label with the input. If you use a different structure, however, this accessibility feature will not be automatic and you will need to associate your label with the input using the for attribute.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

Save my information I am not a robot

Example code

<label class="switch block">
  <input type="checkbox">
  <span>Save my information</span>
</label>
<label class="switch block">
  <input type="checkbox">
  <span>I am not a robot</span>
</label>

I am cool I am not cool Disabled

Example code

<label class="switch">
  <input type="radio" name="rad">
  <span>I am cool</span>
</label>
<label class="switch">
  <input type="radio" name="rad">
  <span>I am not cool</span>
</label>
<label class="switch">
  <input type="radio" name="rad" disabled>
  <span>Disabled</span>
</label>