Native Select

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

如需样式化的 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 属性即可禁用 select。

import {
  NativeSelect,
  NativeSelectOption,

无效

使用 aria-invalid 显示校验错误，并给 Field 组件添加 data-invalid 属性以应用样式。

import {
  NativeSelect,
  NativeSelectOption,

Native Select 与 Select

在需要原生浏览器行为、更好性能或面向移动端优化的下拉框时，使用 NativeSelect。
在需要自定义样式、动画或复杂交互时，使用 Select。

RTL

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

"use client"

import * as React from "react"

API 参考

NativeSelect

用于包裹原生 HTML select 元素的主 select 组件。

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

NativeSelectOption

表示 select 中的单个选项。

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

NativeSelectOptGroup

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

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

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

Menubar Navigation Menu

本页目录

安装用法示例分组禁用无效 Native Select 与 Select RTL API 参考 NativeSelect NativeSelectOption NativeSelectOptGroup

用 Dory 探索你的数据

AI 驱动的 SQL 工作台，连接 Postgres / MySQL 等数据库，快速查询与分析数据。

用 AI 快速得到答案，开源且免费。