Skip to main content

Form Field Types

Field types are used in a form to gather information from users. The field type should be determined contextually based on the information required from the user.

Text Input

Our style guide includes pre-defined styles for all text based inputs. However, some of the newer HTML5 input types have varying support with different browsers so we do not recommend using some of these, such as: datetime, datetime-local, date, month, time, week, url, tel, and color.

Text Area

A text area is used when a multi-line response is expected from the user.

Select

A select input should be used when the user needs to choose a single response from a predefined set.  A select input should include a "-- Select One --" option that is selected by default and the value of that option should be blank (value="").

Note: If 5 or less options are available, use a radio group rather than a select box.

Radio Buttons

Radio buttons should be used when users must choose between two or more mutually exclusive options. Each radio group must have a <legend> to provide context for the decision being made.

Note: If six or more options are needed, use a select box rather than a radio group.

Who would win in a fight between the Avengers and Justice League?
Disabled radio buttons
Inline radio buttons

Checkboxes

Checkboxes are used when users can select multiple options based on the legend. Each checkbox must start with a <legend> to provide context to the decision being made.

Select the type(s) of insurance you currently own:
Disabled checkboxes
Inline checkboxes

Toggle Switch

The toggle switch represents a physical switch that allows users to turn things on or off. It provides clear visual feedback for user interaction with control.

Default toggle state

Active toggle

Disabled toggle

Captcha

Captcha is provided as an additional step in validating user-submitted data. COUNTRY Financial leverages Google's reCaptcha service as a method of verification.