Inputs

The Input element specifies a field for the user to enter information on a page.

Best Practices

Please read Label Guidance first.
Refrain from using placeholder attributes in inputs because they cause usability problems.
Use the Text Input when you can’t predict a user’s response or when another type of Input would make answering the prompt difficult.
If users must choose from a predetermined set of choices, use Radio Buttons or Checkboxes.
Use Textarea if the user needs to enter more than a single line of text.
Clearly label all text input fields.
Use the appropriate type of input for the data being gathered.
Ensure the for and id attributes have matching values.

We currently show 8 of the 22 types of inputs.

See the Pen App Screen Topbar by LA Gov Design Team (@lagovdesignteam) on CodePen.