Forms

A form contains a combination of input fields.

USE BOOTSTRAP

WSDOT public site forms use Bootstrap with some alteration to colors, size, and state.

Text inputs

An image of the text fields and all of their states

Text inputs have a label that titles the field, placeholder text suggesting what the user should enter in the field, and space below the field for an error message.

Responsive

Form fields do not resize as the page width changes. Form fields are the same size on desktop and mobile.

Specs

• Labels

  • Font size: body copy smallest

  • Space between label and field: 6px

• Fields

  • Border: 1px solid [gray 20] (default), [primary 100] (focused/selected), [error] (error)

  • Background-color: white or gray 10 (disabled)

  • Icon padding: 8px;

  • Field height: 48px

  • Field padding: 8px 12px

  • Field font size: body copy medium

  • Field font color: gray 60 (placeholder), gray 100

• Error text font size: body copy smallest

Inspect text fields in brand styles in Figma

Dropdown inputs

An image of the dropdown fields and all of their states

Dropdown inputs have a label that titles the field, placeholder text reminding the user to make a selection, and an icon indicating there is a selection available.

The design suggests styling, if needed, but using native browser styling is recommended for accessibility.

Specs

• Match styles from text inputs

• Narrow dropdown height: 32px

• Narrow dropdown font size: body copy smallest

• Dropdown hover background color: primary 40 50% or #CCE4DF

Inspect dropdown fields in brand styles in Figma

Checkbox inputs

An image of the checkbox fields and all of their states

Checkboxes come in two sizes.

Small - to be used in filter lists and when no other input types are present.

Large - to be used in data entry forms that the user fills in and sit alongside the text input fields. The Small size is too small for a form.

Responsive sizing

Form fields do not resize as the page width changes. Form fields are the same size on desktop and mobile.

Specs

• Checkboxes

  • Border: 1px solid gray 40

  • Background color: white, gray 5 (disabled)

• Large checkboxes

  • Width/height: 32px 32px

  • Icon: 24px wide, 24px high, Material Design check

  • Label font size: body copy medium

• Small checkboxes

  • Width/height: 24px 24px

  • Icon size: 18px

  • Label font size: body copy small

Inspect checkbox fields in brand styles in Figma

Search fields

An image of the search fields and all of their states

Search fields can be used for global search or targeted search. Search fields with the button on the right require the user to manually press it or enter their search. The main search bar comes in two sizes – the large size is used for the global and site-wide search, and the smaller field is used for local searches within a set of data or existing list.

The search bar with the icon on the left is used as a way to filter down results in a list as the user enters a query. It is only used in the filter list when there is a large number of items in a category.

Responsive

Form fields do not resize as the page width changes. Form fields are the same size on desktop and mobile.

Specs

• Large search bar

  • Styles match text inputs

  • Icon width/height: 30px 30px

  • Font size: body copy medium

• Small search bar

  • Height: 32px

  • Icon: 24px wide 24px high

  • Font size: body copy small

Inspect search fields in brand styles in Figma