For form usage and structure, look at Forms.

Radio Buttons

Use radio buttons when a user has to choose only one option. They should be used when there are five or less options that the user must choose from. In instances where there are more than five, use a dropdown.

Checkboxes

Use checkboxes when allowing the user to select more than one option to the prompt.

Dropdowns

Use dropdowns when the user must choose one option of more than five choices.

Error Styling

For more basic information on error styles for forms look at the Form Design Guidelines.

Button Errors

• Selection button errors should be located 28 px below the last selection item.
• Error icons are located 8 px from the beginning of the error message.

Basic Visual Style

Dimensions

• Each text field line has a height of 44 px.
• Radio buttons and checkboxes both are 20 px x 20 px.
• Checkboxes have a border radius of 3 px.
• Dropdown item heights are 40 px.

Borders

• All selctions have a 1 px border in “lighter” grey.
• When selected, checkboxes have a 1 px border and fill of primary blue.
• When active, dropdowns have a 2 px border in primary blue.

Colors

• Dropdown items are highlighted with primary blue with a 5% alpha.