Skip to content
Mesh
4.4.3

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.

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

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
options (required)object or arrayThe list of select options.
placeholderstringThe select placeholder.

Options

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'}
];

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.

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.