Select

How to use select

Use select when a user is submitting data in forms and needs to choose one option from a list.

When using select:

• Use the autocomplete component as well as select if your list has more than 10 options
• Make sure the placeholder label uses instructive language to assist users
• List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order
• Programmatically connect each label to its corresponding option
• If your list has fewer than 4 options, use radio buttons instead

Types of select

Single select

() => {
  const options = [
    { label: "Sainsbury's Groceries", value: "groceries" },
    { label: "Sainsbury's Bank", value: "bank" },
    { label: "Tu", value: "tu" },
    { label: "Argos", value: "argos" },
    { label: "Habitat", value: "habitat" },
    { label: "Nectar", value: "nectar" },
  ]
  return (
    <SelectField
      name="select-field-1"
      label="Select mission"
      options={options}
    />
  )
}

Single select with an error message

() => {
  const options = [
    { label: "Credit card", value: "credit" },
    { label: "Savings account", value: "savings" },
    { label: "Loan", value: "loan" },
    { label: "Mortgage", value: "mortgage" },
  ]
  return (
    <SelectField
      name="select-field-2"
      label="Select existing account held with us"
      options={options}
      error="Sorry online account management is only available for credit cardholders"
      defaultValue="loan"
    />
  )
}

Copy guidelines

When using select:

• Be clear about what will happen if the option is selected
• Start with ‘Please select’ as a placeholder if there isn’t a default option
• Start your select labels with a capital letter
• Don’t use commas or any punctuation at the end of each label
• Don’t use more than three words per label

Was this page helpful?