Input Types

Below are specs for all the form input types. Each input has up to 5 states, including: placeholder, focus, value (filled out), disabled, and error.


Label & Legend

  • Labels are used above all inputs, textareas and selects.
  • Legends are used (similarly to) to a label in fieldsets ↗ above a group of checkboxes or radio buttons.
  • For elements that are a required field, the label or legend should include an asterisk (*) after the label/legend, separated by a space (e.g. First name *).

Label and legend

CSS: Label & Legend

/* Label & legend */
font-family: Apercu-Medium;
font-weight: 600;
font-size: 14px;
line-height: 14px;
margin: 30px 0 10px 0;
color: $black50;

/* Disabled (label) */
color: $gray40;

Hint Text

A optional message under an input. What is this?

Hint

CSS: Hint

/* Hint */
font-family: Apercu-Light;
font-weight: 300;
font-size: 12px;
line-height: 20px;
margin-top: 5px;

/* Instruction (hint) */
color: $gray50;

/* Error (hint) */
font-family: Apercu-Medium;
font-weight: 700;
color: $red50;

Text Input

Used for simple text or numeric fields. Variants include an email, number, password, date and phone inputs, which all use the same base styles as a text input.

Text input

CSS: Text Input

/* Text input */
height: 40px;
background-color: $white;
border: 1px solid $gray40;
border-radius: 2px;
padding: 0 12px;
font-family: Apercu-Light;
font-size: 16px;
color: $black50;

/* :focus (input) */
border-color: $yellow50;

/* Placeholder (text) */
color: $gray50;

/* Disabled (text) */
color: $gray40;

/* Disabled (input) */
border-color: $gray30;

Select

  • Used when there are multiple choices, but only one option can be selected.
  • Consider using radio buttons, as opposed to a select if there are only a couple/few options, or a simple either/or choice.
  • A select also uses less space than a group of radio buttons — something to consider if your form is long, or space is limited.
  • Consider using a toggle if there are only a couple/few options, as a UX consideration.

Select

CSS: Select

/* Largely the same as a text input */

Textarea

  • Used when at least a sentence of text is expected or necessary to be entered.
  • Consider setting a minimum 3 rows, making it clearer to the user that they can write more.

Textarea

CSS: Textarea

/* Largely the same as a text input */

Checkbox

Used when there are multiple choices, and more than one option can be selected.

Checkbox

CSS: Checkbox

/* Input (checkbox) */
width: 16px;
height: 16px;
border: 1px solid $gray400;
border-radius: 2px;
background: $white;

/* Label (to right of input) */
margin-left: 10px;
font-size: 14px;
line-height: 16px;
color: $black50;

/* Checked (tick) */
height: 10px;
width: 10px;
color: $black50;

Radio Buttons

  • Used when there are multiple choices, but only one option can be selected.
  • Radio buttons are ideal for simple either/or choices, or when there are only a couple/few choices.
  • Consider using a select if there are more than a few choices — something to consider if your form is long, or space is limited.
  • Also consider a toggle if space is tight, or as a UX consideration. Radio buttons are preferable over a select when it's important that the user sees the options available to them, to understand and consider, versus a more passive scan of their options via a select.
  • A radio button can never be used singularly (e.g. for a yes/no or opt-in/out data capture), as it can only be selected, not un-selected. A minimum of two options must be presented to use radio buttons. Use a checkbox if there is only one option.

Radio buttons

CSS: Radio Buttons

/* Largely the same as a checkbox, with these differences: */

/* Input (radio) */
border-radius: 100%;

/* Checked (dot) */
height: 8px;
width: 8px;
border-radius: 100%;
color: $black50;

Date Input

Used when a date is required to be entered. On-click of input launches a native React date picker to select a specific date.

Date input

CSS: Date Input

/* Largely the same as a text input */

/* Date icon */
width: 40px;
height: 40px;
color: $gray50;

/* :focus (icon) */
color: $yellow50;

/* Error (icon) */
color: $red50;

/* Disabled (icon) */
color: $gray30;

Phone Number Input

Prefixes a text input with a select to choose from a list of country codes.

  • Defaults to country you are currently in.
  • Selecting a country auto populates formatting of placeholder text (e.g. (000) 000-0000 for the United States).
  • Auto-formatting of a number as you type: e.g. 0000000000 becomes (000) 000-0000
  • Prefix select has min-width of 100px.
  • Flag icons code at: https://github.com/lipis/flag-icon-css

Phone number input

CSS: Phone Number Input

/* Largely the same as a text input */

/* Prefix (select)
background-color: $gray30;
border: 1px solid $gray40;
border-color: $gray40;
min-width: 100px;

/* Flag (in prefix) */
width: 20px;
height: 12px;
padding-left: 10px;
padding-right: 5px;

/* Number (in prefix) */
font-family: Apercu-Medium;
font-size: 14px;
color: $black50;

/* :focus (prefix) */
background-color: $yellow30;
border-color: $yellow50;

/* Disabled (flag) */
color: $gray30;

/* Disabled (number) */
color: $gray40;

/* Disabled (select triangle) */
color: $gray30;

Toggle

Works very much like radio buttons in that you can only select one option.

  • Alternative to radio buttons or a select.
  • Great if space is tight, or as a quick select for only a few options (quicker than a select > options).

Toggle

CSS: Toggle

/* Largely the same as a text input */

/* Toggle (active) */
border-color: $yellow60;
background-color: $yellow50;

results matching ""

    No results matching ""