Search the component library


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.


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

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.


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



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.

Error with error text Error text displayed when error occur

Error with information text Error text displayed below the existing information text

Information text

Information/description text below the inputs.

Password Show//Hide

Show/Hide options for password input

  • Password input contains inline < a > element that controls whether a user’s password is displayed or hidden.
  • Link options are “Show” or “Hide”


Input States

  • border: 1px solid (#C7C7C7)
  • Disable text: 14px normal (#C7C7C7) or Concrete
  • border: no border
  • Read only text: 14px normal, (#252525) or Charcoal
  • Label 12px normal, (#6A7070) or Medium Gray

Regular Inputs field

Input with no label

Input Error States

  • border: 1px solid (#DB0020)
  • Input text: 14px normal (#252525)
  • Label: 12px normal (#6A7070)
  • border: 4px solid (#DB0020)
  • Input text: 14px normal (#252525)
  • Label: 12px normal (#6A7070)

Radio Buttons

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


Check icon
Normal States
  • border-radius: 2px
  • border: 1px solid
  • color: (#6a7070) or Medium Gray
Focus States
  • border-radius: 2px
  • border: 1px solid
  • color: (#047A9C) or Digital Blue
Disable States
  • border-radius: 2px
  • border: 1px solid
  • color: (#c7c7c7) or Concrete
  • fill: (#E9E9E9) or Moonlight

Password Show/Hide

Available Styles Reference As (How do I use this?)
Text Input [](/design/c/inputs/v2.0.0-beta.3/#rd-text-input)
Textarea [](/design/c/inputs/v2.0.0-beta.3/#rd-textarea)
Select Input [](/design/c/inputs/v2.0.0-beta.3/#rd-select-input)
Radio Button [](/design/c/inputs/v2.0.0-beta.3/#rd-radio-button)
Checkbox [](/design/c/inputs/v2.0.0-beta.3/#rd-checkbox)
Label [](/design/c/inputs/v2.0.0-beta.3/#rd-label)
Search Input [](/design/c/inputs/v2.0.0-beta.3/#rd-search-input)



Change design to align with new brand


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


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


  • Add dependency links


  • ADDED: Exported styles


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


  • FIXED: Incorrect labeling in redline image


Initial version