125k

Select

PreviousNext

ボタンで開き、ユーザーが選択できるオプションのリストを表示します。

BaseRadixReact Aria
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 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>

構成

次の構成を使用して、Select を構築します。

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

トリガーとの位置合わせ

SelectContent の alignItemWithTrigger を使用して、選択した項目をトリガーに揃えるかどうかを制御します。true(デフォルト)の場合、選択した項目がトリガーの上に表示されるようにポップアップが配置されます。false の場合、ポップアップはトリガーの端に揃えられます。

トリガーに合わせてアイテムの位置を揃えます。

"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/base/field"
import {
  Select,

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

API リファレンス

詳細については、Base UI Select のドキュメントを参照してください。