Select Native Component

The Select Native component provides a styled native select element for forms, offering the perfect balance between customization and native functionality. Built with accessibility in mind, it includes support for labels, required fields, and various sizes.

Key Features

• Native Functionality: Uses the browser’s native select behavior

• Custom Styling: Tailwind-based design system integration

• Accessibility: Built-in ARIA support and keyboard navigation

• Form Integration: Seamless form data handling

Limitations

• The Select Native component does not support multiple selection.
• The Select Native component does not support custom icons.
• The Select Native component does not support significant custom styling of the options.

If these are an issue, please consider using the Select component instead. It offers more flexibility and customization options.

Basic Usage

Create a simple select dropdown:

1
<Select
2
    options={[
3
        { value: "option1", title: "First Option" },
4
        { value: "option2", title: "Second Option" },
5
        { value: "option3", title: "Third Option" }
6
    ]}
7
/>

Variants

Size Options

Required Fields

Disabled Options

Props API