111k
新建

Select

PreviousNext

通过按钮触发，为用户显示一个可选择的选项列表。

Radix UIBase 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 items={items}>
  <SelectTrigger style={{ width: "180px" }}>
  <SelectValue placeholder="主题" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {items.map((item) => (
        <SelectItem key={item.value} value={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

示例

与触发器对齐项目

在 SelectContent 上使用 alignItemWithTrigger 可以控制所选项是否与触发器对齐。为 true（默认）时，弹层会定位到让选中项出现在触发器上方。为 false 时，弹层会与触发器边缘对齐。

Toggle to align the item with the trigger.

"use client"

import * as React from "react"

分组

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

import {
  Select,
  SelectContent,

可滚动

一个包含很多选项并可滚动的选择器。

import {
  Select,
  SelectContent,

禁用

import {
  Select,
  SelectContent,

无效

给 Field 组件添加 data-invalid 属性，并给 SelectTrigger 组件添加 aria-invalid 属性，即可显示错误状态。

<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 配置指南。

"use client"

import * as React from "react"

API 参考

更多信息请参见 Base UI Select 文档。