Select - Usage
Basic Guidelines
Order the Select list logically from the user’s perspective. This can be either alphabetical, based on the frequency of use, or in increasing order relative to the content.
Labels tell the user the purpose of the field and therefore make the field more accessible.
Prompt requests the user to make a choice. It must include mention of the label of the form field, for example ‘Select your title’, ‘Select your gender’, etc.
Selection shows the option the user has chosen.
In-line Messaging is an optional text field that can be used for further information, clarifying the required input.
Validation Messages inform the users about the correctness of the input.
Variants Usage
Success & Error Variant
The Success variants are available for legacy reasons, but not implicitly necessary. Form fields are validated on submit, which means the form is either sent without issues, or updated showing an error. If errors are rectified, the form needs to be submitted again to trigger another validation. If everything is ok, the form is submitted and it’s not necessary to display a success state.
The error variant is only necessary when a selection is required but the user submitted the form without having selected an option from the list. The error message will be displayed directly beneath the input field.
Mandatory Fields
Select fields can be set to be mandatory. An asterisk will be displayed in front of the label. Please make sure that the meaning of the asterisk is explained to the user at the top of the form. It is not necessary to mark fields as optional.
Disabled state
The Disabled state is an intermediate state while the form is being submitted. It is generally not recommended to use this state within forms because the user cannot tab through a disabled state as the field is not focusable.
There is no Read-only state for the Select component. If you need to present a previously submitted selection, use paragraph style instead. This way users with screen readers are able to listen to this information and it is clear that the selection can’t be changed.
Content Guidance
It is recommended to limit character lengths to avoid text being cut off, or needing to be truncated.
Labels and prompts must always be clear and to the point.
-
Label
24 characters or fewer – The label can be a shortened version of the prompt (e.g. “Your title” or “Your gender”). -
Prompt
24 characters or fewer – The prompt must include mention of the label of the form field so the user knows exactly what information is required (e.g. “Select your title” or “Select your gender”). -
In-line Messaging
In-line Messaging should be as concise as possible, whilst still providing the user with any relevant information that could help them fill out the form field. -
Validation Message
Error messages need to explain in a concise manner exactly what the user has done wrong, and how they can fix it.
Keep Selection prompt and Labels concise and to the point
Avoid long Selection prompts and Labels as they may get cut off or truncated
Alignment
Form fields (Text Input or Select) should be stacked vertically in one column for an easy flow through the form. The 32px gap is space saving, while still providing enough space between the fields to display the labels.
The Select component must align with the grid system set out in Foundations. It sits in-line with the rest of the text.
In a 12-column grid layout, the select fields sit left-aligned within the six centre columns of the grid, in-line with the rest of the text. Their width should be based on the content within, but is generally recommended to be set to three columns wide. The example below is downscaled proportionally for illustration purposes.
