Skip to content
Download assets

Select

A select opens the device's own list. Use it to choose one plain answer, such as a notice period, when radio buttons would take too much room.

Which control to use

Look at how many options there are, how much room the form has, and what each option has to show.

Switch: two states, on or off.
Shift
Radio buttons: up to five options, with room to show them.
Select: plain options in less room.
Combobox: a long list searched by name, or options with flags, photos or hints.

Anatomy

A closed select looks like a text field with a chevron at its end. The open list belongs to the operating system: a menu on a computer, a picker on a phone.

Fill and focus
as the text field
Height
44 px, or 48 px large
Chevron
16 px, 12 px from the end
--text-muted
Text ends at
36 px from the end
Corner radius
8 px
--radius-lg

The first option

If one answer suits most people, select it in advance. If none does, start with an empty option that asks the question, such as Choose a notice period, and treat it as no answer.

Write the options as parallel phrases in sentence case. If none of them may apply, add None.

States and keyboard

A select has the states of the text field. It tells the browser which theme the page is in, so the open list is dark in the dark theme and light in the light one.

The keyboard is the platform's own. The arrow keys move through the options, and typing a letter jumps to the first option that starts with it.

Permitted and not permitted

Permitted

  • Radio buttons for Yes and No

    Both answers are in view and one click chooses.

Not permitted

  • A select that hides two answers

    It costs a click to see a choice the page could show.

NextCombobox

Select

Chooses one plain option through the device's own list when radio buttons would take too much room.

  • Kind: component
  • Page: https://design.werklist.com/components/select
  • Version: 2.1.2

When to use it

  • Plain options in a form, such as a contract type or a notice period, when there are more than five or no room to show them as radio buttons

When not to use it

  • Up to five options with room to show them: radio buttons
  • On or off: a switch
  • A long list people search by name, or options with flags, photos or hints: a combobox
  • Choosing several options

Anatomy

  • Control: the device's own select, drawn with the fill, corner radius and padding of the text field (--input-border)
  • Chevron: 16 px, 12 px from the end (--text-muted)
  • Padding at the end: 36 px
  • List: the operating system's own, a menu on a computer and a picker on a phone, in the theme of the page

Sizes

  • md: height 44 px
  • lg: height 48 px

States

  • Rest, focus, error, disabled: As the text field, with no hover state (--input-border, --brand-blue, --error, --text-muted)
  • No answer yet: An empty first option asks the question, such as Choose a notice period, and counts as no answer for a required field

Keyboard

  • Arrow keys: Move through the options
  • A letter: Jumps to the first option that starts with it
  • Enter, Space or Alt+Down: Open the list, where the platform does so

Accessibility

  • A select element, named by the Field label
  • The open list follows the theme of the page
  • Options can be grouped, and one option can be disabled

Content

  • Options are parallel phrases in sentence case
  • Add None when no option may apply
  • The empty first option asks the question

Tokens

  • --glass-fill-input
  • --input-border
  • --brand-blue
  • --text-muted
  • --radius-lg

JSON

{
  "title": "Select",
  "path": "/components/select",
  "url": "https://design.werklist.com/components/select",
  "text": "https://design.werklist.com/agent/components/select",
  "summary": "The device's own list for choosing one plain option in a form, when radio buttons would take too much room.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Select",
  "purpose": "Chooses one plain option through the device's own list when radio buttons would take too much room.",
  "use": [
    "Plain options in a form, such as a contract type or a notice period, when there are more than five or no room to show them as radio buttons"
  ],
  "avoid": [
    "Up to five options with room to show them: radio buttons",
    "On or off: a switch",
    "A long list people search by name, or options with flags, photos or hints: a combobox",
    "Choosing several options"
  ],
  "anatomy": [
    {
      "part": "Control",
      "measure": "the device's own select, drawn with the fill, corner radius and padding of the text field",
      "token": "--input-border"
    },
    {
      "part": "Chevron",
      "measure": "16 px, 12 px from the end",
      "token": "--text-muted"
    },
    {
      "part": "Padding at the end",
      "measure": "36 px"
    },
    {
      "part": "List",
      "measure": "the operating system's own, a menu on a computer and a picker on a phone, in the theme of the page"
    }
  ],
  "sizes": [
    {
      "name": "md",
      "height": "44 px"
    },
    {
      "name": "lg",
      "height": "48 px"
    }
  ],
  "states": [
    {
      "name": "Rest, focus, error, disabled",
      "change": "As the text field, with no hover state",
      "tokens": [
        "--input-border",
        "--brand-blue",
        "--error",
        "--text-muted"
      ]
    },
    {
      "name": "No answer yet",
      "change": "An empty first option asks the question, such as Choose a notice period, and counts as no answer for a required field"
    }
  ],
  "keys": [
    {
      "key": "Arrow keys",
      "action": "Move through the options"
    },
    {
      "key": "A letter",
      "action": "Jumps to the first option that starts with it"
    },
    {
      "key": "Enter, Space or Alt+Down",
      "action": "Open the list, where the platform does so"
    }
  ],
  "accessibility": [
    "A select element, named by the Field label",
    "The open list follows the theme of the page",
    "Options can be grouped, and one option can be disabled"
  ],
  "content": [
    "Options are parallel phrases in sentence case",
    "Add None when no option may apply",
    "The empty first option asks the question"
  ],
  "tokens": [
    "--glass-fill-input",
    "--input-border",
    "--brand-blue",
    "--text-muted",
    "--radius-lg"
  ]
}

Raw file: https://design.werklist.com/agent/components/select