Select

Being able to see all options at once can help users feel in control of the process, but seeing many radio buttons in a row can turn them off from the whole thing.

Grouping all options into a simple dropdown lets users easily find their way through any number of choices to select the right one.

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Component structure

Guidelines       

Use for many options

Selects work well to present many different options in a compact unit. This way users don’t have to scroll through tens of options to find what they’re looking for.

When you have only a few options so users won’t be overwhelmed by them, it can help to present them all at once, such as with radio buttons.

Use labels

Labels serve to clearly present what the choices mean for users. They are especially important for people who won’t see other visual cues. But they also help everyone know what exactly to choose.

For the label, use short descriptive phrases, ideally nouns that make the request clear. See our patterns for form labels for some examples.

Use help and error messages

For more complicated choices, sometimes labels aren’t enough. You want to include any necessary information as clear as possible to help users make a choice.

Use help messages to guide users before they enter anything and clear, calm error messages when there’s a problem with what they entered.

Remember that such messages are likely to invoke negative feelings, so be positive and focused on solutions to any problems.

Help messages

import Select from "@kiwicom/orbit-components/lib/Select";

() => {
  const [country, setCountry] = React.useState("")
  return (
    <Select
      value={country}
      placeholder="Choose your country"
      options={[
        {
          label: "Algeria",
          value: "dz",
        },
        {
          label: "Bolivia",
          value: "bo",
        },
        {
          label: "Croatia",
          value: "hr",
        },
        {
          label: "Indonesia",
          value: "id",
        },
        {
          label: "Mexico",
          value: "mx",
        },
      ]}
      label="Nationality"
      onChange={(event) => setCountry(event.target.value)}
      help="Choose the country where you hold a passport."
    />
  )
}

Error messages

import Select from "@kiwicom/orbit-components/lib/Select";

() => {
  const [country, setCountry] = React.useState("")
  return (
    <Select
      value={country}
      placeholder="Choose your country"
      options={[
        {
          label: "Algeria",
          value: "dz",
        },
        {
          label: "Bolivia",
          value: "bo",
        },
        {
          label: "Croatia",
          value: "hr",
        },
        {
          label: "Indonesia",
          value: "id",
        },
        {
          label: "Mexico",
          value: "mx",
        },
      ]}
      label="Nationality"
      onChange={(event) => setCountry(event.target.value)}
      help="Choose the country where you hold a passport."
      error={!country ? "Please select a country" : ""}
    />
  )
}

Include placeholder examples

When you have additional information or helpful examples, include placeholder text to help users along. 

Remember that placeholder text is visually less important, low in contrast, and disappears once users enter anything. So do not include anything necessary to complete the field.

import Select from "@kiwicom/orbit-components/lib/Select";

() => {
  const [country, setCountry] = React.useState("")
  return (
    <Select
      value={country}
      placeholder="Choose your country"
      options={[
        {
          label: "Algeria",
          value: "dz",
        },
        {
          label: "Bolivia",
          value: "bo",
        },
        {
          label: "Croatia",
          value: "hr",
        },
        {
          label: "Indonesia",
          value: "id",
        },
        {
          label: "Mexico",
          value: "mx",
        },
      ]}
      label="Nationality"
      onChange={(event) => setCountry(event.target.value)}
    />
  )
}

Look & feel

Background color and borders

See why background and borders for fields differ between app and website versions.

Related components

Radio

If you have only a few options where users can only choose one, use a radio to present them all to users.

Checkbox

If you have only a few options where users can choose multiple options, use a checkbox to present them all to users.

InputField & Tags

If you have many options to choose from and users can choose multiple options at once, consider an input field with tags to present all selected options at once.

ListChoice

If your options have more information for each (such as the distance from a given location), consider using a list choice to present stylized versions of structured choices making the options more clear and attractive.