UX Framework
Inputs
Search the component library

Inputs

v1.0.0-beta.7
Download UI Kit v1.9.0

This component defines the standard visual style for form elements.

Download UI Kit v1.9.0

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

Dependencies

Colors v1.0.1

Typography v1.0.0-beta.5

Buttons v1.0.0-beta.5

Icons v1.0.0-beta.8

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

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

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

Dimensions
  • 36px tall
Spacing
  • 14px horizontal padding
Active
Readonly
  • Same as active, but background becomes Off White (#f2f2f2)
  • Placeholders should never appear in this state
Disabled
  • Same as readonly, but text color becomes Boring (#a6a8ab)
  • Placeholders should never appear in this state
Focus
Error
  • Same 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 Error
  • Add a Firetruck (#D0021B) drop shadow, 5px of blur to the core error style
  • This replaces the default browser style
Small Size
  • 28px 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

Spacing
  • 14px horizontal padding
  • 9px vertical padding
Placeholders
  • Follow text input redlines
States
  • Follow text redlines for states
Small Size
  • 10px horizontal padding
  • Use basic instead of large labels

Basic text area.

Small text area redlines.

Select

Dimensions
  • 36px tall
Spacing
  • 14px horizontal padding
Popup
  • Use browser default style
States
  • Follow redlines for basic text field
Small Size
  • 10px 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

Spacing
  • 10px between button and label
States
  • Use 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 size

Example radio buttons in the Mac OS X browser style.

Checkboxes

Spacing
  • 10px between checkbox and label
States
  • Use 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 Size

Example checkboxes in the Mac OS X browser style.

Labels

Spacing
  • Left justified with related field
  • 6px gap separating
Typography
Error state
Required/Optional
  • Only 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

Dimensions
  • Match text input
Spacing
  • 14px horizontal padding in the text box
  • 14px horizontal padding in the button (inherited from buttons)
Typography
  • Match text input
States
  • Match text input
  • Except for the exclusion of a readonly state
  • Disabled state should override the button style to maintain a border
Button
Joint
  • Override corners to provide square joint between input and button
  • Dividing line should be 1px wide
Available Styles Reference As (How do I use this?)
Text Input [](/design/c/inputs/v1.0.0-beta.7/#rd-text-input)
Textarea [](/design/c/inputs/v1.0.0-beta.7/#rd-textarea)
Select Input [](/design/c/inputs/v1.0.0-beta.7/#rd-select-input)
Radio Button [](/design/c/inputs/v1.0.0-beta.7/#rd-radio-button)
Checkbox [](/design/c/inputs/v1.0.0-beta.7/#rd-checkbox)
Label [](/design/c/inputs/v1.0.0-beta.7/#rd-label)
Search Input [](/design/c/inputs/v1.0.0-beta.7/#rd-search-input)

Changelog

1.0.0-beta.7

  • FIXED: Mockups now match the new focus and error styles.
  • CHANGED: Selects now use new focus and error styles.
  • CHANGED: Radio buttons and checkboxes now have an explicit focus style (this is because certain versions of Firefox lacked a built in style).

1.0.0-beta.6

  • CHANGED: Text input and textarea focus states to use custom (i.e. non-browser) styles. This is because IE11 and Edge and certain versions of Firefox don’t actually implement a browser focus state.
  • CHANGED: Text input and textarea error states to be more compatible with focus + error states.
  • FIXED: Error in the text input redline images.

1.0.0-beta.5

  • Add dependency links

1.0.0-beta.4

  • ADDED: Exported styles

1.0.0-beta.3

  • ADDED: UXD Accessibility checklist
  • ADDED: Sketch and AI mockups
  • CHANGED: Search box input redlines go into more detail

1.0.0-beta.2

  • FIXED: Incorrect labeling in redline image

1.0.0-beta.1

Initial version