Select

Anatomy

Guidelines

Choosing a form control

The Select component is a form control best used when a selection must be made from a predefined list of options longer than a few items. Understanding the difference between similar Pluma form control components will lead to an improved user experience:

• Checkbox Groups are used to select one or more options from a short list.
• Radio Groups are used for short lists where only one option may be selected and there may be a default selected option.
• Segmented Controls include 2-3 mutually exclusive options that act as a mode switch that users will toggle frequently.
• Text Fields are used for freeform text.

Creating new options

When search is enabled, the Select can also allow users to create new options when the typed input doesn't match an existing option in the list. This is best used for creating tags or custom attributes the user will manage on their own.

Handling large lists

Enable search when the list of options is long enough that scrolling impedes the user experience. Searchable Selects add a text input inside the dropdown for filtering. Use the search for lists longer than 10 items. Additionally, be sure to enable infinite scrolling (virtualization) as it will prevent performance issues for large lists.

Best practices

Disabled options

Individual options can be disabled to indicate they exist but aren't available in the current context. Add a description to a disabled option to explain why it's disabled so users understand what action would make them selectable.

Labels and placeholders

While not explicitly required, we highly recommend providing a visible label so users understand the purpose of the Select at a glance. If visible labels aren't possible or needed, be sure to provide an accessible label.

For more information on placeholders and accessibility, see Placeholders under the Accessibility tab.

Types

Customization

In adhering with Pluma's focus on flexibility, the Select component includes customization options beyond plain text. Customization is useful for adding more descriptive option content such as status or metadata or used for highly-specialized applications or layouts.

The following parts of the Select may be customized:

Custom description

Descriptions are assistive text that display below the Select field. They can accept rich content including links.

Custom error

Error messages are assistive text that display below the field. They accept rich content, allowing you to include links or formatted text that better help users resolve the issue.

Custom header and footer

A header or footer can be added to the dropdown menu for supplementary actions or context. The header appears below the search field and above the option list while the footer appears below the option list.

Custom icon

The Select accepts a custom icon component that replaces the default icon area for options. This is useful when the entire option doesn't need to be customized. Avatars, status indicators, or external icons may be used.

Custom label

The label accepts rich content, allowing you to include supplementary elements such as badges or status indicators alongside the label text.

Custom option

Options can be customized to show additional metadata, icons, or status indicators.

Custom selected value

The trigger display can be customized to show a simplified version of the selected value. This is useful when the menu options are content-rich but the trigger should remain compact.

Appearance

Option context

Select options may have an additional icon and/or description to further help users differentiate between choices at a glance.

Add descriptions when labels alone don't fully convey the purpose of each option. Avoid adding icons or descriptions purely for decoration.

Icons

Use icons to provide visual context to the option, such as representing categories or user avatars.

Descriptions

Descriptions can be added to further describe the option in detail. Keep option descriptions concise.

Sizes

Behaviors

States

Clear button

A clear button can be enabled to reset the field to its empty state after a selection is made.

Grouping

Use grouping to organize longer lists into more digestible categories. Avoid grouping for lists that are short enough to digest without explicit categories.

Tooltips

When enabled, options can display tooltips on hover or focus as another method of providing more detail for that option. This may be helpful for use cases where inline option descriptions are unwanted.

Content

Assistive text

Assistive text displays below the Select field and gives the user information about the form field they're interacting with. Assistive text comes in different forms including descriptions and error text.

Description

Use description text to provide hints, formatting guidance, or constraints that help users make the right selection. Use complete, but short sentences for description text.

Error

Error messages communicate issues with the Select that the user must fix before submission. Frame validation errors as direct instructions, not accusations. Be sure to provide guidance on how to fix the error. Keep messages direct and concise. Never use "Please".

Labels

Write clear, concise labels that describe the data the Select represents. Nouns and noun phrases are preferred.

Option label

Option labels should only be a few words at most. If more context is needed, a description or tooltip can be added.

Placeholders

Placeholders help the user complete a field by describing what information it expects or how it should be formatted. For the Select, we recommend short phrases such as "Select a [noun]" or "Search [noun]" when search is enabled. When using examples, start with e.g.