Native Select

Native Select components are used to display a list of items in a compact menu, leveraging the browser's native capabilities for better mobile experience and accessibility.

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.

Disabled

The component can be disabled to prevent user interaction.

Option Groups

Use NativeSelectOptGroup to group related options together.

API Reference

NativeSelect

NativeSelectOption

NativeSelectOptGroup