Form Elements

Overview

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.

Preview

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:”).

Search Field

Typeahead Search Field

Typeahead Search Field with Groups

myCigna Find Care Typeahead

Notes
  • 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.