原生选择框

一个带有一致设计系统集成的样式化原生 HTML 选择框元素。

有关样式化的选择组件，请参见 Select 组件。

import {
  NativeSelect,
  NativeSelectOption,

安装


pnpm dlx shadcn@latest add native-select

用法

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

<NativeSelect>
  <NativeSelectOption value="">选择一个水果</NativeSelectOption>
  <NativeSelectOption value="apple">苹果</NativeSelectOption>
  <NativeSelectOption value="banana">香蕉</NativeSelectOption>
  <NativeSelectOption value="blueberry">蓝莓</NativeSelectOption>
  <NativeSelectOption value="pineapple">菠萝</NativeSelectOption>
</NativeSelect>

示例

分组

使用 NativeSelectOptGroup 将选项组织成类别。

import {
  NativeSelect,
  NativeSelectOptGroup,

禁用

向 NativeSelect 组件添加 disabled 属性以禁用选择框。

import {
  NativeSelect,
  NativeSelectOption,

无效

使用 aria-invalid 显示验证错误，向 Field 组件添加 data-invalid 属性用于样式化。

import {
  NativeSelect,
  NativeSelectOption,

原生选择框与选择组件对比

使用 NativeSelect 以获得原生浏览器行为、更佳性能或移动端优化的下拉菜单。
使用 Select 以获得自定义样式、动画或复杂交互。

API 参考

NativeSelect

主要的选择组件，封装原生 HTML 的 select 元素。

<NativeSelect>
  <NativeSelectOption value="option1">选项 1</NativeSelectOption>
  <NativeSelectOption value="option2">选项 2</NativeSelectOption>
</NativeSelect>

NativeSelectOption

表示选择框中的单个选项。

属性	类型	默认值
`value`	`string`
`disabled`	`boolean`	`false`

NativeSelectOptGroup

将相关选项分组以便更好组织。

属性	类型	默认值
`label`	`string`
`disabled`	`boolean`	`false`

<NativeSelectOptGroup label="水果">
  <NativeSelectOption value="apple">苹果</NativeSelectOption>
  <NativeSelectOption value="banana">香蕉</NativeSelectOption>
</NativeSelectOptGroup>

菜单栏导航菜单

安装用法示例分组禁用无效原生选择框与选择组件对比 API 参考 NativeSelect NativeSelectOption NativeSelectOptGroup