选择

import {
  Select,
  SelectContent,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add select
Copy

用法

🌐 Usage

Copyimport {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

Copyconst items = [
  { label: "Light", value: "light" },
  { label: "Dark", value: "dark" },
  { label: "System", value: "system" },
]
 
<Select items={items}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {items.map((item) => (
        <SelectItem key={item.value} value={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

示例

🌐 Examples

与触发器对齐项目

🌐 Align Item With Trigger

在 SelectContent 上使用 alignItemWithTrigger 来控制所选项目是否与触发器对齐。当 true（默认）时，弹出框的位置使所选项目出现在触发器上方。当 false 时，弹出框与触发器边缘对齐。

🌐 Use alignItemWithTrigger on SelectContent to control whether the selected item aligns with the trigger. When true (default), the popup positions so the selected item appears over the trigger. When false, the popup aligns to the trigger edge.

"use client"

import * as React from "react"

群组

🌐 Groups

使用 SelectGroup、SelectLabel 和 SelectSeparator 来整理条目。

🌐 Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

import {
  Select,
  SelectContent,

可滚动

🌐 Scrollable

一个可以滚动、包含许多选项的下拉菜单。

🌐 A select with many items that scrolls.

import {
  Select,
  SelectContent,

已禁用

🌐 Disabled

import {
  Select,
  SelectContent,

无效

🌐 Invalid

将 data-invalid 属性添加到 Field 组件，将 aria-invalid 属性添加到 SelectTrigger 组件以显示错误状态。

🌐 Add the data-invalid attribute to the Field component and the aria-invalid attribute to the SelectTrigger component to show an error state.

Copy<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>

import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import {
  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

请参阅 Base UI Select 文档。

🌐 See the Base UI Select documentation.