previously Vue Storefront Build Better Storefronts

Select Dropdown

The SelectDropdown is a visually customized version of the Select component, eliminating the reliance on the native "select" HTML tag. Despite the stylistic changes, the functionality of the component remains unchanged, allowing users to make a single selection from a dropdown list. The input can be marked as required and may include hints or additional information.

Please note that the example block provided can also serve as a base component, offering flexibility for implementation within the project based on specific requirements and design considerations.

If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about required form fields in our guide here.

Accessibility notes

The SelectDropdown fully supports the use of the keyboard.

Basic usage

Select Dropdown with preselected option.

With placeholder

Adding placeholder might be helpful and informative for end users.

Invalid state

Provide visual cues for end users to indicate occuring error.

Disabled state

Differentiate disabled state to smooth UX experience. In such case, keyboard navigation becomes disabled as well and an aria-disabled="true" is specified for better accessibility.