120k
New

选择框

PreviousNext

显示供用户选择的选项列表——由按钮触发。

Base UIReact AriaRadix UI
import {
  Select,
  SelectContent,

安装

pnpm dlx shadcn@latest add select

用法

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

组成

使用以下组成来构建一个 Select：

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

分组

使用 SelectGroup、SelectLabel 和 SelectSeparator 来组织项目。

import {
  Select,
  SelectContent,

可滚动

包含许多可滚动项目的选择框。

import {
  Select,
  SelectContent,

已禁用

import {
  Select,
  SelectContent,

无效状态

为 Field 组件添加 data-invalid 属性，并为 SelectTrigger 组件添加 isInvalid 属性，以显示错误状态。

<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <Select isInvalid>{/* ... */}</Select>
</Field>
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import {
  Select,

可搜索

使用 React Aria 的 Autocomplete 组件添加搜索功能。

"use client"

import { Autocomplete, useFilter } from "react-aria-components"

RTL

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

"use client"

import * as React from "react"

API 参考

请参阅 React Aria Select 文档。