Newskit Logo
About

Actions & Inputs

Select

Select components allow users to select one option from a list. They typically appear in forms.

Status

Beta

Introduced

v4.3.0
View code

Status

Beta

Introduced

Anatomy

The select component contains five required elements and two optional elements.

ItemNameDescriptionComponentOptional

Options

The Select component has options that can be used to provide an appropriate experience for different use cases.

Size

There are three sizes of Select; small, medium, and large. The input container, placeholder/input text, start and end enhancers change size. Selects match the same height as the Button and other inputs such as the Text Field, to align when used together.

Select for mobile

There is an option for Select options to appear in a Modal (with overlay), which is intended for long lists of options eg. presenting a list of countries to select from in a Form.

Width

The width of a Select can be customised appropriately for its context, using full-width or a fixed-width value.

Min-height

The minimum height of a Select input can be customised appropriately for its context. Additionally, the minimum height of the Select panel (containing the option items) can be customised appropriately for its context.

Placeholder text

Placeholder text can be displayed to provide the user with a short hint that describes the content that is expected to be inputted by the user (e.g. a sample value or a short description of the expected format).

The short hint is displayed in the input container before the user enters a value.

Note

Placeholder text is not accessible; use assistive text when providing instructions on completing a Select for clarity.

Start enhancer

The Select supports start enhancer property that allows for a component to be added to the start or end of the input container, for example, an icon.

End enhancer

The Select supports end enhancer property that allows for a component to be added to the start or end of the input container, for example, an icon.

Pre-selected options

A pre-selected option can be set on the Select. When specified, the option is displayed in the Select upon page load.

Custom selected display

The Select option item and the Select input can be defined independently. For example, a list of countries may be displayed in a text format in the Select option items and upon user selection, the selected item may display a country flag in the Select input.

Size

There are three sizes of Select; small, medium, and large. The input container, placeholder/input text, start and end enhancers change size. Selects match the same height as the Button and other inputs such as the Text Field, to align when used together.

Select for mobile

There is an option for Select options to appear in a Modal (with overlay), which is intended for long lists of options eg. presenting a list of countries to select from in a Form.

Width

The width of a Select can be customised appropriately for its context, using full-width or a fixed-width value.

Min-height

The minimum height of a Select input can be customised appropriately for its context. Additionally, the minimum height of the Select panel (containing the option items) can be customised appropriately for its context.

Placeholder text

Placeholder text can be displayed to provide the user with a short hint that describes the content that is expected to be inputted by the user (e.g. a sample value or a short description of the expected format).

The short hint is displayed in the input container before the user enters a value.

Note

Placeholder text is not accessible; use assistive text when providing instructions on completing a Select for clarity.

Start enhancer

The Select supports start enhancer property that allows for a component to be added to the start or end of the input container, for example, an icon.

End enhancer

The Select supports end enhancer property that allows for a component to be added to the start or end of the input container, for example, an icon.

Pre-selected options

A pre-selected option can be set on the Select. When specified, the option is displayed in the Select upon page load.

Custom selected display

The Select option item and the Select input can be defined independently. For example, a list of countries may be displayed in a text format in the Select option items and upon user selection, the selected item may display a country flag in the Select input.

States

The Select component has the following states:

Base

The select has a base state. This is the base style of the input before it has been interacted with by a user.

Focus

The select has a focus state. This is the style of the input when the element is focused via keyboard control.

Hover

The select has a hover state. The style of the input changes to visually communicate and provide feedback to the user that the Select input is an interactive element.

Selected

The Select in a selected state changes style when the Select selection conforms to a specific condition eg. the panel appearing. This is the style of the input when the panel element is visible (open).

Valid

The select in a valid state changes style when the selected option conforms to a specific condition eg. updating preferences in a form.

The input style change and validation icon can appear as soon as a user types a valid entry in the input or on submit.

The Form component is used to define this validation behaviour.

Valid focus

The select in a valid state changes style when the selected option conforms to a specific condition eg. updating preferences in a form.

The input style change and validation icon can appear as soon as a user types a valid entry in the input or on submit.

The Form component is used to define this validation behaviour.

Valid hover

The select in a valid hover state changes style when the selected option conforms to a specific condition eg. updating preferences in a form, while hovering.

Invalid

The select in an invalid state changes style when the selected option doesn’t conform to a specific condition eg. not making a selection in a form.

The input style change and validation icon can appear as soon as a user types a valid entry in the input or on submit.

The Form component is used to define this validation behaviour.

Invalid focus

The select in an invalid focus state changes style when the selected option conforms to a specific condition eg. not making a selection in a form, while focused.

Invalid hover

The select in an invalid hover state changes style when the selected option conforms to a specific condition eg. not making a selection in a Form, while hovering

Disabled

The select in a disabled state communicates to the user that an input exists, but cannot be modified in that scenario.

Disabled selects are often used to maintain layout consistency and communicate that an input may become available if another condition has been met, e.g. selecting a previous option in a form.

Read-only

The select in a read-only state communicates to the user that an input exists, but cannot be modified in that scenario (however, a user can tab to it, highlight it, and copy the text from it).

Read-only selects are often used to maintain layout consistency and communicate that an input may become available if another condition has been met, e.g. selecting a previous option in a form.

Content and data in a read-only select can be submitted in a form.

Behaviours

The following guidance describes how the Select component behaves.

Select Input and Select option item text-overflow truncation

When the Select input text or the Select option item text is too long for the available horizontal space, the text truncates.

Truncation is visually indicated using text-overflow:elipsis via the style presets.

Validation

The Select validation rules can be defined for onSubmit or onBlur, for both the initial validation and re-validation using the Form.

For more information, please refer to the Form component..

Note

Validation only works if the Select component uses the Form component.

Validation icon

An icon is used to indicate if the select is in a valid or invalid state. Validation is set on the Form component.

Select Input and Select option item text-overflow truncation

When the Select input text or the Select option item text is too long for the available horizontal space, the text truncates.

Truncation is visually indicated using text-overflow:elipsis via the style presets.

Validation

The Select validation rules can be defined for onSubmit or onBlur, for both the initial validation and re-validation using the Form.

For more information, please refer to the Form component..

Note

Validation only works if the Select component uses the Form component.

Validation icon

An icon is used to indicate if the select is in a valid or invalid state. Validation is set on the Form component.

Usage

The following guidance describes how and when to appropriately use a Select component.

Do

Use a Select to present multiple options where only one can be selected.

Don’t

Don't use a Select when you have only a few options and enough space; use a radio.

A select can cause usability issues due to the number of interactions it takes to select an option.This can increase the likelihood of abandonment of a user task.

Do

Use a Select when there are four or more options for a user to choose from.

Don’t

Don’t use a Select when a user can select more than one option, use a checkbox.

Do

Where possible, define a default option.

Don’t

Have an empty Select upon page load. If a default option isn’t appropriate, define a placeholder such as “Select an option”.

Don’t

Don’t use a Select when a users can add and remove options, consider a Text Field with Tags or a Combobox.

Accessibility Considerations

The Select component has the following accessibility considerations:

Grouping Selects

It is recommended to group selects and other related elements such as Labels and Assistive Text together using the Fieldset component, with a title attributed to the elements that appear in the Fieldset, called a Legend.

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

API

The Select component is compromised of four key elements, these have a range of props that can be used to define an appropriate experience for different use cases.

There are two components exported from the package, one for use within the NewsKit Form component, and one for use as a controlled component.

FormInputSelect

The FormInputSelect has a range of props that can be used to define an appropriate experience for different use cases. Use this component within the NewsKit Form component.

NameTypeDefaultDescriptionRequired
Select

The Select has a range of props that can be used to define an appropriate experience for different use cases. Use this component within the NewsKit Form component.

NameTypeDefaultDescriptionRequired
SelectOption

The SelectOption has a range of props that can be used to define an appropriate experience for different use cases. Use this component within the NewsKit Form component.

NameTypeDefaultDescriptionRequired

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?