Input

Input allows a user to enter and submit data.

Usage

Usage for Input depends on the Input type. Please see the Usage and Guidelines for each Input type. Take care to choose the appropriate Input type for your use case.

Guidelines

• Labels and error messages should be short, instructional, and to the point.
• Labels should be kept to one line.
• If an Input needs more information than can be provided in the label, use Helper Text.

States

Each input has an error and disabled state.

Error

Disabled

Variants

Jump to:

• Checkbox
• Huge Checkbox
• Date Input
• Date Picker
• Helper Text
• Text Input
• Huge Text Input
• Monetary Input
• Password Input
• Percentage Input
• Phone Input
• Radio Button
• Huge Radio Button
• Search Input
• Select Box
• Huge Select Box
• SSN Input
• Textarea

Checkbox

Back to Variants

Checkbox allows a user to choose more than one option from a list.

Huge Checkbox

Back to Variants

Huge checkboxes allow a user to select one or more options from a list.

The Huge Checkbox component is intended for flows that present single questions in a step by step process. For this reason, Huge Checkbox should only be used for stand-alone question flows.

Guidelines

• Ensure list is in logical order for inputs (groups will stack).
• Options should be short and concise. Content should not exceed 40 characters.
• If a concise label is not enough information for the user to make a reasonable choice, consider using a tooltip to provide more context.
• There should be at least two options, but no more than six.
• To see layout configurations with two, three, four, five, or six options, see the Storybook page.
• This component cannot have more than six options. If your design needs more, consider using a Huge Select Box instead.

Anatomy

• A question related to the group of options.
• A list of two to six options, each with a concise label, all the same size.

Date Input

Back to Variants

Date Input is used for collecting a well-known date (e.g. birthdate) or a date in the far future or past (i.e. when did you move?). It does not include a date picker.

• Additional engineering is required to reformat user input into a date pattern (MM/DD/YYYY).
• After valid input, it should reformat to a two digit number month, followed by a forward slash, two digit number day, followed by another forward slash, and four digit number year.
• Additional engineering is required for validation functionality.

Date Picker

Back to Variants

Date Picker is used for collecting a date around one year before or after the current date. We restrict the distance from the current date because it is more difficult for a user to find the date they need when they must page through dozens of months.

• Additional engineering is required to reformat user input into a date pattern (MM/DD/YYYY).
• After valid input, it should reformat to a two digit number month, followed by a forward slash, two digit number day, followed by another forward slash, and four digit number year.
• Additional engineering is required for validation functionality.

Helper Text

Back to Variants

Helper Text provides additional guidance that helps the user understand what information the input requires.

Text Input

Back to Variants

A Text Input allows users to enter and edit text. It is the most common Input type.

Huge Text Input

Back to Variants

Huge Text Input is a larger version of Text Input. The label is inside the Input instead of above it. On focus, the label animates to the top left of the Input and placeholder text takes its place.

Huge Text Input was designed for a multi-step form flow that presents a single Input per page. For this reason, Huge Text Input should only be used for stand-alone Inputs. An exception would be a set of fields that are typically together, like an address.

Guidelines

• Labels must be short enough to fit inside the Input and cannot wrap to a second line.
• The following Inputs are currently able to use the Huge Text Input style:
  • SSN Input
  • Password Input
  • Phone Number Input
  • Date Input
  • Date Picker

Monetary Input

Back to Variants

Monetary Input is used to collect a value in US dollars.

• This field is automatically formatted to include commas, a decimal, and 2 zeros (If no decimal is entered) when focus is removed from the field (e.g. 1,000.00).
• Additional engineering is required to reformat user input into a monetary pattern (##.##)
  • After valid input, it should reformat to add commas and decimals to the hundredth place.
• Additional engineering is required for validation functionality.

Password Input

Back to Variants

Password Input is used for collecting a password.

• The value is masked by default.
• Checking "Show Password" removes the mask and shows the entered value.
• Password Input can also be a Huge Text Input. For full functionality, see guidelines in the Huge Text Inputs section.

Percentage Input

Back to Variants

Percentage Input is used to collect a percent value.

Phone Input

Back to Variants

Phone Input is used to collect a phone number.

• Additional engineering is required to reformat user input into a phone number pattern (###) ###-####.
  • After valid input, it should reformat to have the area code surrounded by parenthesis, a space before the next three digits, and a dash before the next four digits.
• Additional engineering is required for validation functionality.
• Phone Input can also be a Huge Text Input. For full functionality, see guidelines in the Text Huge Inputs section.

Radio Button

Back to Variants

Radio buttons present a list of valid options. Each option allows the user to select one option at a time. Radio buttons are mutually exclusive, meaning if one radio button is selected the other is deselected.

Guidelines

• If the list of choices becomes too large, consider using a Select Box instead.

Huge Radio Button

Back to Variants

Huge radio buttons present a list of valid options that are mutually exclusive. Only one can be selected at a time for any given question.

The Huge radio component is intended for flows that present single questions in a step by step process. For this reason, Huge Checkbox should only be used for stand-alone question flows.

Guidelines

• Ensure list is in logical order for inputs (groups will stack).
• Options should be short and concise. Content should not exceed 40 characters.
• If a concise label is not enough information for the user to make a reasonable choice, consider using a tooltip to provide more context.
• There should be at least two options, but no more than six.
• To see layout configurations with two, three, four, five, or six options, see the Storybook page.
• This component cannot have more than six options. If your design needs more, consider using a Huge Select Box instead.

Anatomy

• A question related to the group of options.
• A list of two to six options, each with a concise label, all the same size.

Search Input

Back to Variants

Search Input allows a user to make a search query.

Select Box

Back to Variants

Allows a user to select one choice from a set of options.

Guidelines

• If there are only a few options in the set, consider using Radio Button.
• Select Box is not the same as the Dropdown component.

Huge Select Box

Back to Variants

This is a larger version of the Select Box, consistent with the style of Huge Text Input. The label is shown inside the select. On focus, the label animates to the top left.

Like Huge Text Input, Huge Select was designed for a multi-step form flow that presents a single Input per page. For this reason, Huge Select Box should only be used for stand-alone Inputs.

Guidelines

• Labels must be short enough to fit inside the Input and cannot wrap to a second line.

SSN Input

Back to Variants

SSN Input is used to collect a Social Security Number.

• Checking "Show SSN" removes the mask and shows the entered value.
• If “Show SSN” is checked, this field is automatically formatted to ###-##-#### once a valid value is entered.
• SSN Input can also be a Huge Text Input. For full functionality, see guidelines in the Huge Text Inputs section.
• Additional engineering is required to reformat user input into an SSN pattern (###-##-####)
  • After valid input, it should reformat to having the first three numbers, a dash, the next two numbers, a dash, and the last four numbers.
• Additional engineering is required for validation functionality.

Textarea

Back to Variants

Textarea allows a user to enter multiple lines of freeform text.