原生选择框

经过样式设计的原生 HTML 选择元素，与一致的设计系统集成。

如需使用带样式的选择组件，请参阅选择组件。

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>

组成

简单

直接放置在 NativeSelect 下的选项（不使用 NativeSelectOptGroup）。

NativeSelect
├── NativeSelectOption
├── NativeSelectOption
├── NativeSelectOption
└── NativeSelectOption

使用分组

使用 NativeSelectOptGroup 将选项按类别组织起来。

NativeSelect
├── NativeSelectOptGroup
│   ├── NativeSelectOption
│   └── NativeSelectOption
└── NativeSelectOptGroup
    ├── NativeSelectOption
    └── NativeSelectOption

分组

使用 NativeSelectOptGroup 将选项组织到不同类别中。

import {
  NativeSelect,
  NativeSelectOptGroup,

已禁用

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

import {
  NativeSelect,
  NativeSelectOption,

无效

使用 aria-invalid 显示验证错误，并将 data-invalid 属性添加到 Field 组件以设置样式。

import {
  NativeSelect,
  NativeSelectOption,

Native Select 与 Select

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

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

NativeSelect

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

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

NativeSelectOption

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

Prop	Type	Default
`value`	`string`
`disabled`	`boolean`	`false`

NativeSelectOptGroup

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

Prop	Type	Default
`label`	`string`
`disabled`	`boolean`	`false`

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

消息滚动器分页

安装用法组成简单使用分组分组已禁用无效 Native Select 与 Select RTL API 参考 NativeSelect NativeSelectOption NativeSelectOptGroup