Yami

Native Select

A styled native HTML select element.

Installation

Add the native select component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/native-select.json

Usage

import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

<NativeSelect defaultValue="next">
  <NativeSelectOption value="next">Next.js</NativeSelectOption>
  <NativeSelectOption value="remix">Remix</NativeSelectOption>
  <NativeSelectOption value="astro">Astro</NativeSelectOption>
</NativeSelect>

Examples

Default

Code

import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

<NativeSelect defaultValue="next">
  <NativeSelectOption value="next">Next.js</NativeSelectOption>
  <NativeSelectOption value="remix">Remix</NativeSelectOption>
  <NativeSelectOption value="astro">Astro</NativeSelectOption>
</NativeSelect>