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="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.
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
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.
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
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
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).
||sets the opacity when disabled|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.