Inputs
Search the component library

Inputs

v2.0.0-beta.2
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

Inputs States

Normal is the normal state of the form element.

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).

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

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

Inputs (single line)

An input is a field used to elicit a response from a user

Hint text Usage Hint text should be used as an aid to help guide users on the required format and content.

  • Hint text disappear as soon as input become focus.

Example of standard inputs

Inputs (multiple lines)

Multiple lines inputs are to be used for multiple lines of text.

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.

Closed and opened select.

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.”

Various radio button states.

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.

Various checkbox states.

Labels

Required/Optional

Use the label to indicate whether a given field is required or optional.

Usage Only label in the minority case (for example, if 6 fields are required and 2 are optional, only indicate the optional fields).

Required and Optional label

Example using (optional)label in a form

Error Inputs State

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.

Information text

Information/description text below the inputs.

Inputs with icon

Usage The icons in the input fields can only be used for common inputs that can be visualized by simple icons. For example: Search, Username, phone number.

Redlines

Input States

Normal
  • 1px solid (#6A7070) border
  • Input text (#252525), 14pt normal
  • Label (#252525),10pt normal
Focus
  • 4px solid (#047A9C) border
  • Input text (#252525), 14pt normal
  • Label (#047A9C),10pt normal
Disable
  • 1px solid (#6A7070) border
  • Read only text (#6A7070), 14pt normal
Readonly
  • No border
  • Read only text (#252525), 14pt normal

Regular Inputs field

Input with no label

Input Error States

Normal
  • 1px solid (#DB0020) border
  • Input text (#252525), 14pt normal
  • Label (#DB0020),10pt normal
Focus
  • 4px solid (#DB0020) border
  • Input text (#252525), 14pt normal
  • Label (#DB0020),10pt normal

Radio Buttons

Size
  • 18x18px
States
  • There is no error state for the radio button itself, you must use explanatory text

Checkboxes

Size
  • 18x18px
States
  • There is no error state for the radio button itself, you must use explanatory text

Input with icon

Dimensions
  • Match text input
Icon size
  • 18x18px
Typography
  • Match text input
States
  • Match text input
Available Styles Reference As (How do I use this?)
Text Input [](/design/c/inputs/v2.0.0-beta.2/#rd-text-input)
Textarea [](/design/c/inputs/v2.0.0-beta.2/#rd-textarea)
Select Input [](/design/c/inputs/v2.0.0-beta.2/#rd-select-input)
Radio Button [](/design/c/inputs/v2.0.0-beta.2/#rd-radio-button)
Checkbox [](/design/c/inputs/v2.0.0-beta.2/#rd-checkbox)
Label [](/design/c/inputs/v2.0.0-beta.2/#rd-label)
Search Input [](/design/c/inputs/v2.0.0-beta.2/#rd-search-input)

Changelog

1.0.0-beta.8

Nothing yet

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