原生选择框

一个带有一致设计系统集成的样式化原生 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 来显示校验错误，并向 Field 组件添加 data-invalid 属性以便样式化。

import {
  NativeSelect,
  NativeSelectOption,

原生选择框 vs 选择框

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

RTL

要在 shadcn/ui 中启用 RTL（从右到左）支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

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 选择框 RTL API 参考 NativeSelect NativeSelectOption NativeSelectOptGroup