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.

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