Forms gather information from users via Checkboxes, Inputs, Radio Buttons, Listboxes, Dropdowns and Textareas. Always use semantic HTML form elements, e.g., <fieldset>, <legend>, <label>, and <input> within forms to ensure accessibility and future-proofing with upgraded browsers.
Search Input fields are unique and apart from standard input fields. They are de facto recognized as a single field input/submit form and sometimes lack a formal “submit” button in favor of a magnifying glass functional icon. As such, a standard label is optional and can be replaced with the word(s) “Search” or “Search ” in the default resting state. A “Search” label can also be used, and can be positioned above the field or to the left of the field (be sure to include a colon, i.e. “Search:”).
Typeahead Search Field
Typeahead Search Field with Groups
myCigna Find Care Typeahead
- A default list of eight “often searched for” items can be displayed before any characters are typed in
- The default list is cleared as soon as one character is typed in
- Matching characters are highlighted in bold, letter by letter as they are typed in
- First subset occurs after two characters have been typed in
- If the number of matches exceeds eight, a vertical scrollbar allows for additional items to be displayed
Sliders provide a way to collect numeric (and sometimes date) input on a predetermined scale. A slider with two handles -- what the user drags to make their selection – can collect two data points or a range.