Forms

A collection of inputs and controls for customer information.

Form Example


Native Checkboxes

<label class="form__label form__label--checkbox">
  <input type="checkbox" class="form__checkbox">
  Active Checkbox
</label>

<label class="form__label form__label--disabled form__label--checkbox">
  <input type="checkbox" disabled class="form__checkbox">
  Disabled Checkbox
</label>

Description

Checkboxes are used to make a range of selections on specific items. Checkboxes also trigger components like the Bulk Selector. The form__checkbox ensures the native checkbox styling are preserved.

UT Checkboxes

<label class="form__label form__label--checkbox">
  <input type="checkbox" class="input-checkbox">
  Active UT Checkbox
</label>

<label class="form__label form__label--disabled form__label--checkbox">
  <input type="checkbox" disabled class="input-checkbox">
  Disabled UT Checkbox
</label>

Description

For specific cases, like the dashboard, the custom UserTesting styled checkboxes may be used. The input-checkbox class provides the custom styling.

Sizes

<label class="form__label form__label--checkbox form__label--small">
  <input type="checkbox" class="input-checkbox input-checkbox--small">
  Small
</label>

<label class="form__label form__label--checkbox form__label--medium">
  <input type="checkbox" class="input-checkbox input-checkbox--medium">
  Medium
</label>

<label class="form__label form__label--checkbox form__label--large">
  <input type="checkbox" class="input-checkbox input-checkbox--large">
  Large
</label>

Description

Depending on context a different size of checkbox may be needed.

Do

  • Use clear copy to explain what the customer can expect after a click

Don't

  • Use checkboxes of different sizes immediately next to each other

Accessibility

- Receives `:focus`

Select

<div class="drop-menu">
  <div class="dropdown">
    <select class="dropdown__trigger">
        <option value="Value1">Hermione Granger</option>
        <option value="Value2">Harry Potter</option>
        <option value="Value3">Ronald Weasley</option>
    </select>
  </div>
</div>

Description

This dropdown text pattern is primarily used in forms to make a selection. The button’s width is tied to the option with the longest character count.

Radio Button

<label class="input--radio input--inline">
  <input type="radio" name="demo_radio" value="tablet" checked="checked"> Gryffindor
</label>
<label class="input--radio input--inline">
  <input type="radio" name="demo_radio" value="computer"> Hufflepuff
</label>
<label class="input--radio input--inline">
  <input type="radio" name="demo_radio" value="computer"> Slytherin
</label>
<label class="input--radio input--inline">
  <input type="radio" name="demo_radio" value="computer"> Raven
</label>

Description

Radio Buttons are used to make a single selection on a group of items. The default state should always have an item selected.

Radio Button Group

<div class="radio-btn-group">
  <label class="radio-btn-group__label">
    <input class="input--hidden" type="radio" name="radio-group-name-here-1" checked="checked">
    <span class="btn--inverse">Draco Malfoy</span>
  </label>
  <label class="radio-btn-group__label">
    <input class="input--hidden" type="radio" name="radio-group-name-here-1">
    <span class="btn--inverse">Vincent Crabbe</span>
  </label>
  <label class="radio-btn-group__label">
    <input class="input--hidden" type="radio" name="radio-group-name-here-1">
    <span class="btn--inverse">Gregory Goyle</span>
  </label>
</div>

Description

This pattern allows customers to toggle between multiple options to make a selection. The default state should always have an item selected. Only one item in the group can be selected at a time.

Do

  • Ensure one Radio Button Group item is selected
  • Provide clear copy with each radio selection

Don't

  • Allow more than one radio button group to be selected at a time

Accessibility

- Receives `:focus` - Groups of `radio` buttons should share the same `:name`

Text Input

<label class="form__label form__label--stacked">
  Standard input
  <input class="form-input" type="text">
</label>

<div class="m-2x"></div>

<label class="form__label form__label--stacked">
  Error input
  <input class="form-input form-input--error" type="text">
</label>

<div class="m-2x"></div>

<label class="form__label form__label--disabled form__label--stacked">
  Disabled input
  <input class="form-input form-input--disabled" disabled type="text">
</label>

Description

Text inputs are used to collect written information from customers. It has a range of options and supports several text formats including numbers, emojis and more.

Input Title

Potions Exam
<div class="study-title">
  <label class="form__label form__label--stacked">
    Ordinary Wizarding Level
      <input
        class="form-input t-xl study-title__input study-title__display mv-2x"
        placeholder="Student's name, house"
        value="Half-Blood Prince, Slytherin"
        type="text"/>
  </label>
  <span class="study-title__workspace">Potions Exam</span>
</div>

Description

Input Titles are used to name things.

Textarea

<label class="form__label form__label--stacked">
  Standard textarea
  <textarea class="form-input form-input--textarea"></textarea>
</label>

<div class="m-2x"></div>

<label class="form__label form__label--stacked">
  Error texarea
  <textarea class="form-input form-input--textarea form-input--error"></textarea>
</label>

<div class="m-2x"></div>

<label class="form__label form__label--disabled form__label--stacked">
  Disabled textarea
  <textarea class="form-input form-input--textarea form-input--disabled" disabled></textarea>
</label>

Description

Similar to input, textarea, collects written information but accommodates multiple lines of content. Textarea also comes with the ability to resize the height and width of the input based on the customer’s discretion.

Do

  • Ensure textarea and input patterns are used at the appropriate size
  • Use the textarea pattern when we expect many lines of copy
  • Use placeholders that are instructive

Don't

  • Use placeholders that repeat label copy

Accessibility

- Receives `:focus`

Input Stepper

<label class="form__label form__label--stacked">
  Points for Gryffindor
  <input class="form-input input--stepper" type="number" min="0" value="0"/>
</label>

Description

When a controlled number is to be used this pattern allows our customers to choose an exact number. They may use the up/down controls or type their preferred number in the input.

Do

  • Pair stepper pattern with instructive copy
  • Help guide customers on how to interact with the stepper

Don't

  • Use multiple steppers next to each other

Accessibility

- Receives `:focus`

Labels

<label class="form__label form__label--stacked">Default Label</label>

<label class="form__label form__label--disabled form__label--stacked">Default Label (Disabled)</label>

<label class="form__label form__label--large form__label--stacked">Large Label</label>

<label class="form__label form__label--disabled form__label--large form__label--stacked">Large Label (Disabled)</label>

Description

Labels provide context to inputs and should be paired with inputs when applicable. Labels should wrap <input> when possible. This allows the label to be clickable, which helps customers interact with the input pattern.

Do

  • Group labels near the inputs they are referencing
  • Write clear and concise labels

Don't

  • Repeat labels

Accessibility

- Receives `:focus`

Form states

Callout: highlights warning and issues that may arise

Success: Communicates completion or conformation

Error: Notifies a blocking error that requires attention

<div class="form__callout">
  <p>Callout: highlights warning and issues that may arise</p>
</div>

<div class="form__success">
  <p>Success: Communicates completion or conformation</p>
</div>

<div class="form__error">
  <p>Error: Notifies a blocking error that requires attention</p>
</div>

Description

Form states behave like banners and provide important information related to elements within the form. They differ from banners because they are tied to form specific elements.

Form rule


<hr class="form__rule">

Description

A dividing line to break up content within forms.

Do

  • Use one rule to separate each piece of content

Don't

  • Use rules to separate titles from content