Nativeselect

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 Reka UI.

Installation

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

pnpm exec frontfriend download native-select -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { NativeSelect } from "@/components/ui/native-select";
import { NativeSelectOption } from "@/components/ui/native-select";
import * as UI from "@/components/ui/native-select";

const Component = UI.NativeSelect;

const args = {
  "size": "default",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { size?: "sm" | "default" };
</script>

<template>
  <NativeSelect class="w-[180px]" v-bind="args"
    ><NativeSelectOption value="react">React</NativeSelectOption
    ><NativeSelectOption value="vue">Vue</NativeSelectOption></NativeSelect
  >
</template>

Props API

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

Subcomponents

NativeSelectOption
NativeSelectOptGroup

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

NativeSelect
NativeSelectOptGroup
NativeSelectOption

Examples

Default

<script setup lang="ts">
import { NativeSelect } from "@/components/ui/native-select";
import { NativeSelectOption } from "@/components/ui/native-select";
import * as UI from "@/components/ui/native-select";

const Component = UI.NativeSelect;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NativeSelect class="w-[180px]" v-bind="args"
    ><NativeSelectOption value="react">React</NativeSelectOption
    ><NativeSelectOption value="vue">Vue</NativeSelectOption></NativeSelect
  >
</template>

Small

<script setup lang="ts">
import { NativeSelect } from "@/components/ui/native-select";
import { NativeSelectOption } from "@/components/ui/native-select";
import * as UI from "@/components/ui/native-select";

const Component = UI.NativeSelect;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NativeSelect size="sm"
    ><NativeSelectOption value="apple">Apple</NativeSelectOption
    ><NativeSelectOption value="banana"
      >Banana</NativeSelectOption
    ></NativeSelect
  >
</template>

Disabled

<script setup lang="ts">
import { NativeSelect } from "@/components/ui/native-select";
import { NativeSelectOption } from "@/components/ui/native-select";
import * as UI from "@/components/ui/native-select";

const Component = UI.NativeSelect;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NativeSelect class="w-[180px]" disabled
    ><NativeSelectOption value="react">React</NativeSelectOption
    ><NativeSelectOption value="vue">Vue</NativeSelectOption></NativeSelect
  >
</template>

With Label

<script setup lang="ts">
import { Label } from "@/components/ui/label";
import { NativeSelect } from "@/components/ui/native-select";
import { NativeSelectOption } from "@/components/ui/native-select";
import * as UI from "@/components/ui/native-select";

const Component = UI.NativeSelect;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="grid w-full max-w-sm gap-2">
    <Label for="framework">Framework</Label
    ><NativeSelect id="framework"
      ><NativeSelectOption value="react">React</NativeSelectOption
      ><NativeSelectOption value="vue">Vue</NativeSelectOption></NativeSelect
    >
  </div>
</template>

Grouped

<script setup lang="ts">
import { NativeSelect } from "@/components/ui/native-select";
import { NativeSelectOptGroup } from "@/components/ui/native-select";
import { NativeSelectOption } from "@/components/ui/native-select";
import * as UI from "@/components/ui/native-select";

const Component = UI.NativeSelect;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <NativeSelect class="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
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`modelValue`	`NativeSelectValue \| NativeSelectValue[]`	`—`
`size`	`"sm" \| "default"`	`—`

NativeSelectOptGroup

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

NativeSelectOption

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

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