Nativeselect — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download native-select -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
<NativeSelect className="w-[180px]" size="default" disabled={false}>
  <NativeSelectOption value="react">React</NativeSelectOption>
  <NativeSelectOption value="vue">Vue</NativeSelectOption>
</NativeSelect>;

Props API

Prop	Type	Required	Description
`size`	`"sm" \| "default"`	No

Subcomponents

NativeSelectOption
NativeSelectOptGroup

Examples

Default

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
<NativeSelect className="w-[180px]" >
  <NativeSelectOption value="react">React</NativeSelectOption>
  <NativeSelectOption value="vue">Vue</NativeSelectOption>
</NativeSelect>;

Small

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
<NativeSelect size="sm" className="w-[180px]">
  <NativeSelectOption value="react">React</NativeSelectOption>
  <NativeSelectOption value="vue">Vue</NativeSelectOption>
</NativeSelect>;

Disabled

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
<NativeSelect disabled className="w-[180px]">
  <NativeSelectOption value="react">React</NativeSelectOption>
  <NativeSelectOption value="vue">Vue</NativeSelectOption>
</NativeSelect>;

With Label

import { Label } from "@/components/ui/label";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
<div className="grid w-full max-w-sm gap-2">
  <Label htmlFor="framework">Framework</Label>
  <NativeSelect id="framework">
    <NativeSelectOption value="react">React</NativeSelectOption>
    <NativeSelectOption value="vue">Vue</NativeSelectOption>
  </NativeSelect>
</div>;

Grouped

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select";
<NativeSelect className="w-[200px]">
  <NativeSelectOptGroup label="Frontend">
    <NativeSelectOption value="react">React</NativeSelectOption>
    <NativeSelectOption value="vue">Vue</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Backend">
    <NativeSelectOption value="node">Node.js</NativeSelectOption>
    <NativeSelectOption value="go">Go</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default	Description
`size`	`"sm" \| "default"`	`"default"`	Optional "sm" \| "default"

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.