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.