Select

Examples

Default

View va-select default in Storybook

Required

View va-select required in Storybook

Hint text

View va-select with hint text in Storybook

Read only

View va-select inert, or read only in Storybook

Error

View va-select error message in Storybook

Dynamic options

View va-select dynamic options in Storybook

Internationalization

View va-select internationalization in Storybook

Widths

View va-select widths in Storybook

Forms pattern - Single

View va-select forms pattern single in Storybook

Forms pattern - Single error

View Error state for single select pattern in Storybook

Forms pattern - Multiple

View Multiple select pattern example in Storybook

Usage

Additional guidance for VA

Choosing between variations

• Use the Forms pattern - Single and Forms pattern - Multiple variations for implementing the Ask users for a single response pattern. These component variations are specifically designed to help implement the single response pattern. The Forms pattern - Single error variation shows error handling for the component variation. For select components used outside of this pattern, for example on a longer form page, use the standard select variations.

Choosing the right component for the task

When deciding which component to use, consider the number of options available to the user. The total number of options will determine which component is right for the task:

• 2 - 5 options: Use Radio button when there are only a few options that can all be exposed at once.
• 6 - 15 options: Use Select for a limited number of options.
• 16 - 100 options: Use Combo box, which combines a select with typeahead functionality for easier selection.
• 101+ options: Use Search Input with typeahead to help users quickly find the right option from a large set.

Exceptions to consider when choosing a component

In some cases, there are common outliers and exceptions to account for:

• When the options are known and memorable. Options like months, days, states, countries, and other familiar data groupings can be considered exceptions to choosing the right component. For example, the Combo box works well for Countries or States that benefit from both scrolling or typing to find the selection. Consider your user and evaluate if typing or comparing options would be a better user experience when finalizing the component choice.
• When the radio button labels are long or radio tiles contain descriptive text. Long labels within a dropdown might make it difficult to read and select an option. Radio tiles often include descriptive text that cannot be used in a dropdown. In these cases, Radio button may be the better choice.
• When the task is to sort a set of results. Use the dedicated Sort component, which utilizes a Select component as its foundation.

Contact the Design System team via #platform-design-system for help if you have other use cases that may be considered exceptions.

When the task requires multiple selections

The components above are for single-selection tasks. For multiple selections, use Checkbox. The same count thresholds may not apply. However, consider breaking long checkbox lists into grouped categories or using a different interaction pattern if the list exceeds 15 options.

Errors

• Refer to the specific error example above.

Hint text

• Refer to the hint text example above.

Code usage

Native Events

• The native onKeyDown event is available on this component. It can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.

Accessibility considerations

Privacy guidance

When Personally Identifiable Information (PII) or Protected Health Information (PHI) is an option in a selection list, selections can’t be tracked in analytics or passed into other page elements that may be tracked.

• Analytics tracking for this component must remain off if the options contain PII or PHI.
• Selections can’t be utilized in elements on follow-on or related pages, such as a parameter or title tag.

Example: A form application asks the user to select a health condition from a dropdown list. Details about a person’s health conditions are considered PHI. The option selected can be stored in our data systems, but the selection can’t be tracked in analytics or utilized as part of the title tag in the next page.

Learn more about PII/PHI on the VA Platform website

Component checklist

Provide feedback

Share your feedback, report issues, or suggest improvements for the Select component. Your input helps us make the design system better for everyone.

• Get immediate support in #platform-design-system for technical or urgent issues.
• Explore all feedback channels for additional ways to share your input.