Skip to main content
On this page

Choosing a form field

Pick the field that matches the data you are collecting, and the number of options the user is choosing from.

Overview​

The right field usually follows from what you're collecting. The decision only gets interesting when the user is choosing from a set of options.

This pattern covers which field to use. Each field's own page covers how to use it, and Forms covers how to structure the form around it.

The core decision​

Start with whether the value comes from a known list of options, then work down.

Where the value isn't from a known list​

  • Is it a specific type of input, such as a number, an amount of money, an email address, a date or a file?
    • Yes. Use the field for that type.
    • No. Will the answer run to more than one line?

Where the value comes from a known list​

Principles​

Use the most specific field for the data​

Where a field exists for the thing you're collecting, use it rather than a plain Text Field. The specialised variants set the input's type, so a phone number brings up a keypad on a phone and a password is masked as it's typed. A Text Field labelled 'Email' does none of that.

Don't use a field to display a value​

If a value is read-only, render it as text rather than putting it in a field, and use Summary List where it belongs in a set of labelled values.

Show all the options when there are few​

A short list of options is faster to scan when every option is visible, which is why the count matters more than the kind of data. Hiding four options behind a Select Field costs the user an interaction to see something that would have fitted on the page.

Scenarios​

A specific type of input​

Use the field built for it rather than a Text Field with a telling label:

The first four share the Text Field API. See Text Field.

Loading...
Edit live code
<Stack spaceBetween={4}>
  <NumberField id="meter-reading" label="Meter reading" characters={8} />
  <EmailField id="account-email" label="Email address" characters={25} />
  <CurrencyField id="payment-amount" label="Payment amount" characters={8} />
</Stack>

Datepicker Field covers dates the user knows from memory too, such as a date of birth. Its input takes a typed dd/mm/yyyy date without the calendar being opened, so nobody has to page back through years. Date Field, which split the date into three inputs for that case, is deprecated for new work.

More than one line of text​

Use Textarea Field. A single short value like a name or a reference number belongs in a Text Field, even where the field looks wide enough for more.

Loading...
Edit live code
<TextareaField id="call-notes" label="Notes from this call" />

Plain text​

Use Text Field, where none of the specialised variants fits and the answer is a single line.

Loading...
Edit live code
<TextField id="account-reference" label="Account reference" characters={12} />

Several options from a list​

Use Checkbox Field where the user can pick any number of options from a short list, and a single Checkbox inside it for one on or off choice.

Loading...
Edit live code
<CheckboxField label="Which services does the account have?">
  <Checkbox label="Electricity" id="service-electricity" />
  <Checkbox label="Gas" id="service-gas" />
  <Checkbox label="Boiler cover" id="service-boiler" />
</CheckboxField>

Once the list is long enough that the user would rather search it than read it, use Combobox Field with multiple set, which shows each selection as a removable chip.

One option from a list​

Use Radio Field for up to about six options, where every option can be read at once.

Loading...
Edit live code
<RadioField
  name="contact-preference"
  label="How should we contact you?"
  defaultValue="email"
>
  <Radio label="Email" id="contact-email" value="email" />
  <Radio label="Phone" id="contact-phone" value="phone" />
  <Radio label="Post" id="contact-post" value="post" />
</RadioField>

From about seven options, use Select Field. Past about fifteen, or wherever the user would rather search than scroll, use Combobox Field, which handles single selection as well as multiple.

A Radio Field with a single option is never right, because a radio can't be deselected once chosen. For a single yes or no, use a Checkbox.

Accessibility​

  • Every field needs a visible label, whichever you choose, and a placeholder is not one. See Forms.
  • A group of radios or checkboxes is one field. Radio Field and Checkbox Field wrap the group so it's announced as a whole rather than as loose controls.
  • A single radio traps the user, because it can't be deselected once chosen. Use a Checkbox for a binary choice.
  • No field has a disabled state, which is deliberate. See Disabled states.
  • Give every field a unique id, since each one associates its label by id, and a repeated id breaks that association for both fields.

Related​