Inputs
Search the component library

Inputs

v1.0.0

This component defines the standard visual style for form elements.

Usage Guidelines

Every instance of a form element should come from this component. See the sections below for information about when to use each type of form.

Features

  • Single collection of all basic form styles
  • Text, Textarea, Select, Radio, Checkbox, Field Labels (required vs. optional)
  • Guaranteed compliance with Accessibility requirements

Form States

Active is the normal state of the form element. It is available for user interaction.

Focus is initiated when the user interacts with the field. We currently allow the browser to provide default styling for focus states (except for the text input and textarea as browsers are inconsistent in their use of a focus state here).

Read only indicates that a field is active, but not editable.

Disabled state is a form input that is unavailable for interaction.

Error is used when a field has been filled out incorrectly. This state should always be paired with an explanatory message.

Focused Error appears when the user focuses an input with an error.

The five basic states. Note that focus is generally left up to the browser, except for the text and textarea inputs.

Text

Text input form elements are to be used for single line text inputs.

Placeholders can be used to give additional information about the format of data. They should typically not be used to label the input field; exceptions can be made when there is a single field and a secondary purpose indicator exists (like a search bar with a search icon in the attached button).

Note that the component provides custom focus styles for this input since certain versions of Firefox, IE11, and Edge don't offer a default focus state.

A smaller size is also available.

Basic and small text inputs with values.

Basic text inputs with labels and placeholders.

Textarea

Textarea form elements are to be used for multiple lines of text.

Vertical and horizontal resizing options may be enabled where appropriate.

Textarea states are styled similarly to regular text inputs.

They may also take a placeholder like basic text inputs. In this case the placeholder should simply offer additional information or guidance around the data format, it should never replace a label for the field.

Note that the component provides custom focus styles for this input since certain versions of Firefox, IE11, and Edge don't offer a default focus state.

A smaller size is available.

Basic and small textareas.

Example placeholder used to provide an example input.

Select

The select input allows a user to choose one of many predetermined options.

A default value can be set for the select element if it's recommended for most users. Bear in mind that a user can easily overlook a preselected item, so use caution when doing so.

The popup will follow the browser default style.

A smaller variant is available.

Closed and opened select (demonstrating the Mac OS X default browser style); example of the smaller select size.

Radio Buttons

Radio buttons are for when the user must choose a single item out of several options.

Choose radios over selects when you want the user to carefully consider the options and need to expose all available options.

If there are only two mutually exclusive options, consider using a single checkbox. For example, use a checkbox for "I agree" instead of two radio buttons for "I agree" and "I don't agree."

Radio buttons use the default browser style.

Smaller radio buttons are also available.

Basic states for radio buttons; an example of the smaller size.

Checkboxes

Checkboxes are for times when the user needs to make one or more binary choices about a related item.

Unlike radio buttons, where a group of radio buttons represents a single choice, each check box in a group represents a separate, independent choice. When there is more than one option but only one can be selected, use a radio button instead.

Checkboxes use the default browser style.

Like the other inputs, checkboxes are also available in a smaller size.

Various checkbox states; an example of the smaller checkbox size.

Labels

Labels communicate the purpose and meaning of a field to users.

Try to avoid over-explaining in the label (password requirements, for example, should be communicated in another way).

Labels come in one size but can be used for both standard and small inputs.

Required/Optional

Use the label to indicate whether a given field is required or optional. Only label the minority case (for example, if 6 fields are required and 2 are optional, only indicate the optional fields).

Specialized Inputs

Search

There is a standard search component which extends the basic text input with a integrated button on the right.

Because this includes the button which indicates purpose the placeholder can serve as the input label (although this isn't required).

Search only comes in the standard size right now.

Search input with integrated button.

Redlines

Text

Dimensions36px tall
Spacing14px horizontal padding
Active1px solid Hairline Gray (#d0d0d0) border
White (#ffffff) background
Large label (primary color)
Place holders are large labels, Sandy Gray (#6d6d6d), italic
ReadonlySame as active, but background becomes Off White (#f2f2f2)
Placeholders should never appear in this state
DisabledSame as readonly, but text color becomes Boring (#a6a8ab)
Placeholders should never appear in this state
FocusReplace default browser style
Basic Blue (#107ACA) border
Basic Blue (#107ACA) dropshadow, no X/Y offset, 5px blur
ErrorSame as active, except:
1px solid Firetruck (#D0021B) border
Error states must be accompanied by explanatory text. See the forms component for standard examples of error handling.
Focused ErrorAdd a Firetruck (#D0021B) drop shadow, 5px of blur to the core error style
This replaces the default browser style
Small Size28px tall
10px horizontal padding
Use basic instead of large labels throughout

Active text field, with both a value and a placeholder.

Small text inputs.

Readonly and disabled states.

Focus (reproduction of Mac OS X style) and error states.

Textarea

Spacing14px horizontal padding
9px vertical padding
PlaceholdersFollow text input redlines
StatesFollow text redlines for states
Small Size10px horizontal padding
Use basic instead of large labels

Basic text area.

Small text area redlines.

Select

Dimensions36px tall
Spacing14px horizontal padding
PopupUse browser default style
StatesFollow redlines for basic text field
Small Size10px horizontal padding
28px tall
Use basic instead of large labels

Readonly and disabled states.

Focus (reproduction of Mac OS X browser default) and error states.

Closed and open select (showing a browser default style); small select example.

Radio Buttons

Spacing10px between button and label
StatesUse browser default styles in most cases
Override for focus to show a 1px Basic Blue outline, with a 2px offset
Note this means there is no error state for the radio button itself, you must use explanatory text
Small sizeUse basic label, instead of large

Example radio buttons in the Mac OS X browser style.

Checkboxes

Spacing10px between checkbox and label
StatesUse browser default styles in most cases
Override for focus to show a 1px Basic Blue outline, with a 2px offset
Note this means there is no error state for the radio button itself, you must use explanatory text
Small SizeUse basic label, instead of large

Example checkboxes in the Mac OS X browser style.

Labels

SpacingLeft justified with related field
6px gap separating
TypographyBasic label
Error stateFiretruck (#D0021B) color
Required/OptionalOnly label the type which occurs less frequently
Simply append '(required)' or '(optional)' to the label text

Labels name each field.

Only label whichever type occurs less frequently (e.g. if there are four required fields and one optional only notate the single optional field).

Search input

DimensionsMatch text input
Spacing14px horizontal padding in the text box
14px horizontal padding in the button (inherited from buttons)
TypographyMatch text input
StatesMatch text input
Except for the exclusion of a readonly state
Disabled state should override the button style to maintain a border
ButtonMedium button (default style)
Search icon, large label size
JointOverride corners to provide square joint between input and button
Dividing line should be 1px wide

Changelog

1.0.0

Initial version