Native Select

A basic NativeSelect with a Placeholder and static option elements. The component renders a native <select> with custom styling including a chevron indicator, rounded borders, and focus ring. Use @bind-Value for two-way binding to track the selected option.

Use the Size parameter to control the select dimensions. Available sizes are Small for compact layouts with reduced height and text, Default for standard usage, and Large for prominent selections with increased height and text size.

Set Disabled to true to prevent user interaction. The select appears with reduced opacity and a not-allowed cursor, and cannot be opened. This is useful for read-only states or when a prerequisite condition must be met first.

Since NativeSelect renders a native <select> element, you can use standard HTML <optgroup> elements to organize options into labeled groups. This is ideal for categorizing long lists such as countries by region or products by category.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific styles. You can change the border color, focus ring, background, or border radius to match your design system without creating a new component.

Use NativeSelect with Field and Label components for accessible form layouts. The native select integrates cleanly with form field patterns because it uses the browser's built-in form behavior, making it a great choice for simple forms that do not need search or filtering.

A real-world registration form composition using NativeSelect alongside Input components inside a Card. This demonstrates how native selects integrate naturally into complete form layouts where search functionality is not needed.