原生选择框

一个带有一致设计系统集成的样式化原生 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,

原生选择框 vs 选择框

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

API 参考

NativeSelect

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

<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>

菜单栏导航菜单 Navigation Menu

安装使用方法示例分组禁用无效状态原生选择框 vs 选择框 API 参考 NativeSelect NativeSelectOption NativeSelectOptGroup