Native Select

Native Select uses the browser's built-in select element, while custom Select is fully styled. Native provides better mobile experience with native pickers but less control over appearance. Use Native for mobile-first or when styling isn't critical.

Native Select provides better mobile experience, better accessibility out-of-the-box, and better performance. On mobile devices, it triggers the system's native picker (iOS wheel, Android dropdown) which users are familiar with and can navigate efficiently.

Styling options are limited compared to custom selects—you can style the button/container, but the dropdown appearance is controlled by the browser/OS. If you need custom styling for the dropdown itself, use the custom Select component instead.

Yes! Native Select supports <optgroup> for organizing options into categories. For example, grouping countries by continent or products by category. Groups appear as disabled labels that organize the dropdown visually.

Yes, highly accessible! Native browser select elements have built-in accessibility features that work with all screen readers and assistive technologies. They handle keyboard navigation, focus management, and ARIA attributes automatically.

Yes, this Figma Native Select component matches the shadcn/ui implementation, providing a design representation of the native select that translates to properly functioning form controls in production.