Inputs
Our form input guidelines are based on the US Web Design System.
Text inputs
Good for freeform responses.
Bad for structured data when you want the user to choose from an existing set of options. Text inputs are also harder for City staff to work with.
Number inputs
Number fields require the unit you are measuring next to the field.
Do
[number field] tests
[number field] units
Don’t Do
[number field]
Radio buttons
Radio buttons allow users to see all available choices and select exactly one.
Good for choosing one option from a predetermined list.
Bad for choosing from more than 7 options or when a user can choose multiple options.
Check boxes
Checkboxes allow users to select one or more options from a visible list.
Good for choosing one or more options from a predetermined list.
Bad for choosing from more than 7 options or when a user can only select one option.
A single checkbox can also be used to confirm, such as terms or disclaimers.
Type-ahead dropdown combo box
When there are more than 7 options (or 6 options plus an Other), use a type-ahead dropdown field that auto-populates from available options.
Date input
Birth dates and other known dates are easiest typed in.
A date picker is best for scheduling or choosing a day in the recent past or near future.
Placeholder text
We do not use placeholder text in any field where a user types in an answer. It causes confusion and is not accessible.
We can use placeholder text for dropdowns, like “State” or “Type of construction”.
Do