109k
新建

选择器

上一页下一页

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

Radix UIBase UI
Radix UI - shadcn/ui 组件库
import {
  Select,
  SelectContent,

安装

pnpm dlx shadcn@latest add select

用法

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
<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>

示例

对齐触发器项

在 SelectContent 上使用 position 属性来控制对齐方式。当设置为 position="item-aligned"（默认值）时，弹出窗口会进行定位，使选定项显示在触发器上方。当设置为 position="popper" 时，弹出窗口将与触发器边缘对齐。

切换以将选项项与触发器对齐。

"use client"

import * as React from "react"

分组

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

import {
  Select,
  SelectContent,

可滚动

一个带有多个可滚动选项的选择框。

import {
  Select,
  SelectContent,

禁用

import {
  Select,
  SelectContent,

无效状态

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

<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 参考

查看 Radix UI Select 文档。