Actions & Inputs
Select
Select components allow users to select one option from a list. They typically appear in forms.
Status
Beta
Introduced
Anatomy
The select component contains five required elements and two optional elements.
| Item | Name | Description | Component | Optional |
|---|
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
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
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:
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.
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User 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.
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.
| Name | Type | Default | Description | Required |
|---|
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.
| Name | Type | Default | Description | Required |
|---|
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.
| Name | Type | Default | Description | Required |
|---|
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.
| Feature | Description | Status |
|---|