Design Tokens for Mesh have just been released!
Skip to content

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.

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

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

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.

PropTypeDefaultDescription
optionsobject or arrayThe list of select options.
placeholderstringThe select placeholder.
childrennodeChildren 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.