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.


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.


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

Interactive demo



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.

options (required)object 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.


The options prop accepts both an array of items, and dictionary of key:value pairs:


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


Using an array guarantees order.

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


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.


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.