Native select element based on Input
NativeSelect component supports Input and Input.Wrapper component features and all select element props. The NativeSelect documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right' . This is useful for async operations like API calls, searches, or validations:
NativeSelect can be used with uncontrolled forms the same way as a native select element. Set the name attribute to include native select value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.
Example usage of uncontrolled NativeSelect with FormData :
NativeSelect allows passing options in two ways:
Note that if children is used, the data will be ignored.
The data prop accepts values in one of the following formats:
Example of the data prop with an array of grouped options:
To add options with the children prop, use option elements to add options and optgroup elements to group them:
Use hr tags to add dividers between options:
NativeSelect supports leftSection and rightSection props. These sections are rendered with absolute positioning inside the input wrapper. You can use them to display icons, input controls, or any other elements.
You can use the following props to control sections styles and content:
NativeSelect supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
NativeSelect description
Component Styles API
Hover over selectors to highlight corresponding elements
If NativeSelect is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :