Select Combo

Label

Select combos should always have a label. In rare cases where context is sufficient and the UX Team have reviewed the design, the label could be undefined. These select combos without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited. Additional utility classes may be needed for label maximum widths and alignments etc.

Value

The value shows a user’s entered text or the option they’ve selected.

Width

The width of a select combo can be customized appropriately for its context.

Size

Select combos come in three different sizes: small, medium, large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

Optional

By default select combos are assumed required and have no indication at all (such as an asterisk, as hint text would then need to be included to explain what it means). Select combos can be marked as optional. Optional text fields are denoted with text added to the end of the label — “(optional)”.

Error

A select combo can be marked as having an error to show that a value needs to be entered in order to move forward, or that a value that was entered is invalid. If an error exists, the error icon always overrides any other icon.

Disabled

A select combo in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that it may become available later.

Select Combos have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A select combo does not have a read-only option if no selection has been made.

Help Text

A select combo can have help text below the input field to give extra context or instruction about what a user should input. The help text area has two options: a description and an error message. The description communicates a hint or helpful information, such as specific requirements for what to choose. The error message communicates an error for when the input requirements aren’t met, prompting a user to adjust what they had originally selected.

Minimum Width

The minimum width for a select combo is 2.5× the height of the field button. This minimum width guarantees that small select combos are readable and easy to target on touch devices.

Text Overflow

When the field label and menu text are too long for the available horizontal space, they wrap to form another line. The field text itself truncates at the end, but the text can be shown in full in the menu.

Help Text Overflow

When the help text is too long for the available horizontal space, it wraps to form another line.

Menu Height

The select combo menu can be as tall as necessary to show as many options as possible in the available space. There is no maximum height.