原生选择

import {
  NativeSelect,
  NativeSelectOption,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add native-select
Copy

用法

🌐 Usage

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

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

示例

🌐 Examples

群组

🌐 Groups

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

🌐 Use NativeSelectOptGroup to organize options into categories.

import {
  NativeSelect,
  NativeSelectOptGroup,

已禁用

🌐 Disabled

将 disabled 属性添加到 NativeSelect 组件以禁用选择。

🌐 Add the disabled prop to the NativeSelect component to disable the select.

import {
  NativeSelect,
  NativeSelectOption,

无效

🌐 Invalid

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

🌐 Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.

import {
  NativeSelect,
  NativeSelectOption,

原生选择 vs 选择

🌐 Native Select vs Select

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

NativeSelect

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

🌐 The main select component that wraps the native HTML select element.

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

NativeSelectOption

表示选择中的单个选项。

🌐 Represents an individual option within the select.

NativeSelectOptGroup

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

🌐 Groups related options together for better organization.

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