previously Vue Storefront Build Better Storefronts

Select

SfSelect is a wrapper around the native <select> element. It provides additional styles for different states of <select> element.

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.

Examples

Select sizes

SfSelect supports 3 sizes that can be set with the size prop: 'sm', 'base', 'lg'.

Custom chevron

You can replace the default chevron with your own custom content by using the chevron slot.

Invalid state

SfSelect accepts an invalid prop that will add additional styling.

Notes

All non-prop attributes and styles added to SfSelect component are passed directly to native input element. This means that you can add all of the input attributes directly to SfSelect. If you want to style the wrapper div, you can pass your classes via the wrapperClassName prop.

If you only have a few options, consider using the Radio component instead of Select.

Accessibility notes

Since this component uses the native <select> element, it inherits its accessibility features. For example, keyboard users can focus the select with tab, open with space, navigate the options using arrows, close the options menu with Escape, and select an option with Enter or Space.

Playground