Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownPrinciplesAccessibilityUsage & variationsDemos & APIFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Dropdown

StableAccessible

A dropdown offers a user a list of options, of which one or multiple can be selected. Dropdowns are often used as part of forms and filters.

Principles

  • A label should always be provided with dropdowns. Aim for labels that are short, concise and easy to understand.
  • Dropdowns usually have four (4) or more options. When having only 2-3 options, it is usually better to use radio buttons or checkboxes. Also, if options need to be easily comparable (for example, product pricing), prefer radio buttons over dropdown.
  • It is recommended to set a default option for a single selection dropdown. If the default option is also the recommended option, you can mark the option with a text "(recommended)".
  • If your dropdown has 8 or more options, consider using the Combobox variant which offers filtering options by typing.
  • Try to avoid dropdown options that span over one line. Aim for short texts for all options.
  • If possible, do input validation client-side in real-time and provide the user with immediate feedback after selection.

Should I use Select or Combobox?

  • Use Select variant when
    • there are less than 8 options
    • the user does not need to be able to filter options by typing
  • Use Combobox variant when
    • there are 8 or more options
    • the user needs to be able to filter options by typing

Accessibility

  • Dropdowns should be only used as form controls or as value pickers. Do not use dropdowns for menus or navigation since they cannot contain links or buttons.
  • Do not use context change triggers (e.g. links) as dropdown options. See WCAG 3.2.2 On Input guideline for more information.
  • Placeholder text can be used to give hints and examples to the user what is being selected with the dropdown. However, all assistive technologies do not threat placeholder texts as labels and therefore they may ignore them completely. Aim to provide the sufficient information to fill the input in the label or in the assistive text. Also if possible, set default option for the dropdown so the placeholder is not needed.
  • In the case of an erroneous selection, aim to provide clear instructions to the user how to correct the mistake. Always provide text description of the error. In dropdowns it is usually possible to filter selectable options for the user to avoid errors completely.
  • HDS Dropdowns support getA11ySelectionMessage that should be included to give screen reader better feedback when an option is selected.

Usage & variations

Select (single selection)

Select dropdown serves in most use cases when the user needs to select one of 4 to 7 options. If there are 8 or more options available, consider using Combobox to allow filtering.

          React code example:

          <Select
          required
          label="Label"
          helper="Assistive text"
          placeholder="Placeholder"
          options={[{ label: 'Plutonium' }, ...]}
          />
          <Select
          disabled
          label="Label"
          helper="Assistive text"
          placeholder="Placeholder"
          options={[{ label: 'Plutonium' }, ...]}
          style={{ marginTop: 'var(--spacing-xs)' }}
          />
          <Select
          invalid
          required
          label="Label"
          error="Error description"
          placeholder="Placeholder"
          options={[{ label: 'Plutonium' }, ...]}
          style={{ marginTop: 'var(--spacing-xs)' }}
          />
          <Select
          required
          label="Label"
          helper="Assistive text"
          placeholder="Placeholder"
          icon={<IconUser />}
          options={[{ label: 'Adam' }, ...]}
          style={{ marginTop: 'var(--spacing-xs)' }}
          />

          Select (multi-selection)

          Select multi-selection variant allows the user to select one or more options simultaneously. Note! Select dropdown does not feature filtering options by typing. When this feature is needed or there are a large number of options available, consider using consider using Combobox.

            React code example:

            <Select
            multiselect
            required
            label="Label"
            placeholder="Placeholder"
            helper="Assistive text"
            options={[{ label: 'Plutonium' }, ...]}
            clearButtonAriaLabel="Clear all selections"
            selectedItemRemoveButtonAriaLabel="Remove ${value}"
            />

            Combobox (single selection)

            Combobox dropdown serves in most use cases when the user needs to select one from 8 or more options (up to hundreds of options). Combobox variant features filtering options by typing.

                    React code example:

                    <Combobox
                    required
                    label="Label"
                    helper="Assistive text"
                    placeholder="Placeholder"
                    toggleButtonAriaLabel="Toggle menu"
                    options={[{ label: 'Americium' }, ...]}
                    />
                    <Combobox
                    disabled
                    label="Label"
                    helper="Assistive text"
                    placeholder="Placeholder"
                    toggleButtonAriaLabel="Toggle menu"
                    options={[{ label: 'Americium' }, ...]}
                    style={{ marginTop: 'var(--spacing-xs)' }}
                    />
                    <Combobox
                    invalid
                    required
                    label="Label"
                    error="Error description"
                    placeholder="Placeholder"
                    toggleButtonAriaLabel="Toggle menu"
                    options={[{ label: 'Americium' }, ...]}
                    style={{ marginTop: 'var(--spacing-xs)' }}
                    />
                    <Combobox
                    required
                    label="Label"
                    helper="Assistive text"
                    placeholder="Placeholder"
                    icon={<IconUser />}
                    toggleButtonAriaLabel="Toggle menu"
                    options={[{ label: 'Adam' }, ...]}
                    style={{ marginTop: 'var(--spacing-xs)' }}
                    />

                    Combobox (multi-selection)

                    Combobox multi-select variant allows the user to select one or more options simultaneously. Combobox variant features filtering options by typing.

                      React code example:

                      <Combobox
                      multiselect
                      required
                      label="Label"
                      helper="Assistive text"
                      placeholder="Placeholder"
                      options={[{ label: 'Americium' }, ...]}
                      clearButtonAriaLabel="Clear all selections"
                      selectedItemRemoveButtonAriaLabel="Remove ${value}"
                      toggleButtonAriaLabel="Toggle menu"
                      />

                      Demos & API

                      Core

                      Not included in hds-core!

                      React

                      Select in hds-react

                      Select API

                      Combobox in hds-react

                      Combobox API