Select Field
Usage
When to Use
Use a select field in combination with a drop-down list to allow users to select from a list of 5 or more options.
Use a select field in combination with a date picker to allow users to select a date or a range of dates.
When Not to Use
If you offer less than 5 options for the single-select variant, use radio buttons or a switcher instead.
If you offer less than 5 options for the multi-select variant, use checkboxes instead.
Generally, don’t use select fields for numbers. Use text fields instead and give information about restrictions by adding a help text. You can additionally add a stepper to the input field to let users make adjustments to their input.
Size
Select fields are available in two sizes: medium (28 pixels height) and small (24 pixels height). Decide on one size for the whole application. This decision also affects buttons, text fields, and switchers. Refer to the Sizing and Spacing Guidelines for more information.
Medium-sized select field
Small-sized select field
Width
Generally, use a width of 100 pixels, 240 pixels or 400 pixels. Make sure that the width of your select field is big enough so that the longest of your options can fit into the select field.
In some cases, a custom width makes sense. For instance, to equal the left and right margins in a dialog.
Variants
Select fields come in two style variants: bordered and text-only.
Bordered Select Fields
Bordered select fields are easy to identify and highly emphasized.
Empty state
Filled state
Text-Only Select Fields
Text-only select fields are the same as text drop-down buttons. Since they don’t need much space, they are mainly used in dense interfaces.
Empty state
Filled state
Label Position
Top-Aligned Labels
In most cases, it is best to align labels to the top of the select field. This way, users can see the label and the current input without making big eye movements between the label and the select field.
Left-Aligned Labels
For bordered select fields, you can also align labels to the left.
States
Error State
The error state indicates that some input is missing or erroneous. Usually, an error text is displayed below the select field.
If you don’t have enough space to add the description text below the select field, you can use an error bubble instead.
Pay attention when formulating the error message. The message should explain to users what they have to do to continue their process.
Disabled State
Select fields that are in the disabled state can’t be clicked or changed. Only use the disabled state if it is obvious why the select field is disabled. Users should not have to think about what to do to enable it.
Content
Use short and descriptive labels. Try to use three or fewer words. If that’s not possible, provide a help text instead of using a long label.
Don’t use the words select, choose or pick in your labels. If you need to use one of the words for the help text, always use select.
If you know what most users want, it is best to give default values. Good defaults can speed up the process and help novice users understand the purpose of specific select fields. (NNGroup, The Power of Defaults)
Use sentence-style capitalization for labels, help texts, and error messages. For help text, only end sentences with periods if you use two or more sentences.
Layout
Spacing With Top-Aligned Labels
Use 24 pixels of spacing for vertical alignment.
Spacing With Left-Aligned Labels
Select fields with left-aligned labels have a vertical spacing of 32 pixels.
The horizontal spacing between the label and the select field should be 32px. If you use multiple select or text fields, the longest label within the group is used to define the vertical spacing.
