Switches
Similar to Checkboxes, you can use Switches to indicate or control boolean values. They are usually used to turn a specific setting on or off.
Section titled “ Design”
Section titled “ Accessibility”Structure
Section titled “Structure”Screen readers convey information about text fields automatically through native HTML.
- To disable, add the HTML disabled attribute to the text field.
- To set as read-only, add the HTML readonly attribute to the text field.
- Provide a unique id attribute value for the text field and use the for attribute to connect the label with the text field. This allows screen readers to convey the purpose of the text field.
Labeling
Section titled “Labeling”- Make sure all fields have a visible label and the label is associated properly to the field for accessibility.
- Avoid using placeholder text whenever possible. It can pose a range of accessibility problems, like:
- Low color contrast, making the text hard to read
- Inconsistent behavior between browsers and screen readers
- Text disappearing when the user starts typing, which can be confusing to people with cognitive impairments
- Limited space available for additional context, due to field size
- Make sure any critical information is communicated either in the field label or using helper text. Search fields or brief examples are the only exceptions where placeholder text is OK.
Keyboard support
Section titled “Keyboard support”- Text fields have standard keyboard support.
- Customers who rely on the keyboard expect to move focus to each text field using the tab key (or shift + tab when tabbing backwards).
- If the type is set to number, then customers can use the up and down arrow keys to adjust the value typed into the field when hovering over or focusing the field to make the arrows appear.
- Using the disabled attribute will prevent the text field from receive keyboard focus or inputs.
- The readOnly attribute allows focus on the text field but prevents input or editing.