原生 Select

一种经过样式美化、并与设计系统无缝集成的原生 HTML select 元素。

若需样式化选择组件，请参阅 Select 组件。

import {
  NativeSelect,
  NativeSelectOption,

安装


pnpm dlx shadcn@latest add native-select

用法

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

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

示例

分组

使用 NativeSelectOptGroup 将选项组织进类别中。

import {
  NativeSelect,
  NativeSelectOptGroup,

禁用

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

import {
  NativeSelect,
  NativeSelectOption,

无效状态

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

import {
  NativeSelect,
  NativeSelectOption,

原生 Select 与 Select 对比

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

RTL (从右至左)

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

"use client"

import * as React from "react"

API 参考

NativeSelect

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

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

NativeSelectOption

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

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

NativeSelectOptGroup

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

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

<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>

菜单栏导航菜单

本页内容

安装用法示例分组禁用无效原生 Select 与 Select 对比 RTL (从右至左)API 参考 NativeSelect NativeSelectOption NativeSelectOptGroup

在 Vercel 上部署你的 shadcn/ui 应用

OpenAI、Sonos、Adobe 等公司的信任之选。

Vercel 提供工具和基础设施，以规模化部署应用和功能。