Native Select

The Native Select component lets users choose an option from a dropdown list using the browser’s built-in select menu. It provides a simple and familiar way to handle selections.

It uses the native HTML select behavior, which works well on mobile devices and supports accessibility by default.

Built with React and styled using Tailwind CSS. It supports different states, such as error and success, along with placeholders and grouped items.

Installation

npx @tailgrids/cli add native-select

Anatomy

Import the component and pass the required props.

import {
  NativeSelect,
  NativeSelectOption
} from "@/registry/core/native-select";

export const NativeSelectExample = () => (
  <NativeSelect>
    <NativeSelectOption value="option1">Option 1</NativeSelectOption>
    <NativeSelectOption value="option2">Option 2</NativeSelectOption>
  </NativeSelect>
);

Examples

States

The Native Select component supports error and success states for validation feedback.

Placeholder

Use the placeholder prop to display a placeholder when no value is selected.

Disabled

The component can be disabled to prevent user interaction.

Option Groups

Use NativeSelectOptGroup to group related options together.

API Reference

NativeSelect

NativeSelectOption

NativeSelectOptGroup

Accessibility

• Semantic structure: Uses the native <select> element, so it follows standard form behavior by default.
• Keyboard support: Users can open the dropdown and move between options using keyboard keys such as Arrow keys, Enter, and Space.
• Label association: The select can be linked to a label using htmlFor and id, so users understand what the field is for.
• Screen reader support: Options, selected values, and groups are handled through the browser’s built-in accessibility behavior.
• Disabled state: Disabled selects and options are handled natively and are not interactive.