Stable

Select

A standard select input component, also known as a drop-down list. A select control should be avoided when possible, especially for a small number of options, as they hide choices from the user.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

Installation

bash

npm install @nib-components/select

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.

Usage

jsx

import Select from '@nib-components/select';

Interactive demo

jsx

<FormControl label="Your state" name="state" id="state" valid={false} validated={false} error="Please choose your state.">
  <Select
    options={{
      act: 'Australian Capital Territory',
      nsw: 'New South Wales',
      nt: 'Northern Territory',
      qld: 'Queensland',
      sa: 'South Australia',
      tas: 'Tasmania',
      vic: 'Victoria',
      wa: 'Western Australia',
      hg: 'Hogsmeade'
    }}
    placeholder="Where do you live?"
  />
</FormControl>

<FormControl label="Your state" name="state" id="state" valid={false} validated={false} error="Please choose your state.">
  <Select
    options={{
      act: 'Australian Capital Territory',
      nsw: 'New South Wales',
      nt: 'Northern Territory',
      qld: 'Queensland',
      sa: 'South Australia',
      tas: 'Tasmania',
      vic: 'Victoria',
      wa: 'Western Australia',
      hg: 'Hogsmeade'
    }}
    placeholder="Where do you live?"
  />
</FormControl>

Option groups

Options can be grouped by passing in as children and using the html <optgroup> and <option> elements instead of the options prop:

jsx

<FormControl label="Your state" name="stateGroups" id="state-groups" valid={false} validated={false} error="Please choose your state.">
  <Select placeholder="Where do you live?">
    <optgroup label="States">
      <option>New South Wales</option>
      <option>Queensland</option>
      <option>South Australia</option>
      <option>Tasmania</option>
      <option>Victoria</option>
      <option>Western Australia</option>
    </optgroup>
    <optgroup label="Territories">
      <option>Australian Capital Territory</option>
      <option>Northern Territory</option>
    </optgroup>
  </Select>
</FormControl>

<FormControl label="Your state" name="stateGroups" id="state-groups" valid={false} validated={false} error="Please choose your state.">
  <Select placeholder="Where do you live?">
    <optgroup label="States">
      <option>New South Wales</option>
      <option>Queensland</option>
      <option>South Australia</option>
      <option>Tasmania</option>
      <option>Victoria</option>
      <option>Western Australia</option>
    </optgroup>
    <optgroup label="Territories">
      <option>Australian Capital Territory</option>
      <option>Northern Territory</option>
    </optgroup>
  </Select>
</FormControl>

Props

As the <Select/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.

All props passed directly to <Select/> will be applied to the underlying <select> as attributes.

Prop	Type	Description
`options`	object or array	The list of `select` options.
`placeholder`	string	The `select` placeholder.
`children`	node	Children can be provided to the `Select` component when `options` are not provided (if `options` exist, they are given higher priority). This allows for the use of `<optgroup>` elements.

Options

Options can be passed to the Select via the options prop, or via children. The options prop accepts both an array of items, and dictionary of key:value pairs.

Object

javascript

const options = {
  small: 'Small',
  medium: 'Medium',
  large: 'Large'
};

Array

Using an array guarantees order.

javascript

const options = [
  {value: 'small', label: 'Small'},
  {value: 'medium', label: 'Medium'},
  {value: 'large', label: 'Large'}
];

Children

Passing options as children also guarantees order.

jsx

<Select placeholder="Size">
  <option value="small">Small</option>
  <option value="medium">Medium</option>
  <option value="large">Large</option>
</Select>

And allows for grouping of options.

jsx

<Select placeholder="Size">
  <optgroup label="Smaller">
    <option value="xxsmall">XX Small</option>
    <option value="xsmall">X Small</option>
    <option value="small">Small</option>
  </optgroup>
  <optgroup label="Larger">
    <option value="large">Large</option>
    <option value="xlarge">X Large</option>
    <option value="xxlarge">XX Large</option>
  </optgroup>
</Select>

Considerations

Set a meaningful placeholder value. A question makes a good placeholder value as it prompts the user to interact with the select and consider the available options.

Ensure you have a relevant label for the select (see our Form Control component) as this provides further context around the purpose of the select.

When isFullWidthSelect prop is set to true on Form Control, this will set max-width to 100%. By default, Select components have space allocated to the right for a validation icon to appear. This prop turns off this space and should only be used when the select input is not going to be validated.

Try and limit the amount of available select options to less than 7. This will help the user to not be overwhelmed by options.

Do not set a default option value as users may miss the input entirely leading to null or incorrect data.

Alternatives

For shorter lists, consider using a Radio Group. This will help to expose all available options up front to the user.

For longer lists, consider using a typahead solution like our experimental Autocomplete component. Form design can help to avoid long select lists by asking the right questions beforehand, and filtering the list of options accordiongly.

Edit this page