选择

import {
  Select,
  SelectContent,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add select
Copy

用法

🌐 Usage

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

Copy<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="light">Light</SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

示例

🌐 Examples

与触发器对齐项目

🌐 Align Item With Trigger

在 SelectContent 上使用 position 属性来控制对齐。当 position="item-aligned"（默认）时，弹出层位置使所选项目出现在触发器上方。当 position="popper" 时，弹出层与触发器边缘对齐。

🌐 Use the position prop on SelectContent to control alignment. When position="item-aligned" (default), the popup positions so the selected item appears over the trigger. When position="popper", 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

请参阅 Radix UI Select 文档。

🌐 See the Radix UI Select documentation.