7onicDESIGN SYSTEM

Select

Selectは、ドロップダウンリストからひとつの値を選択するフォームコントロールです。キーボード操作やスクリーンリーダーに対応したアクセシブルな実装で、ネイティブフォーム送信もサポートします。

2
Position
5
Sizes
Form
Sync
Radix
Base

Playground

プレビュー
default
Size
Radius
Position
Flush
Disabled
<Select>
  <Select.Trigger>
    <Select.Value placeholder="Select a fruit" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="banana">Banana</Select.Item>
    <Select.Item value="cherry">Cherry</Select.Item>
    <Select.Item value="grape">Grape</Select.Item>
  </Select.Content>
</Select>

Variants

Basic
最もシンプルなセレクト。単一選択リスト。
カテゴリー選択
Grouped
グループとラベルで関連項目を整理。
国選択、地域分類
With Placeholder
未選択時にプレースホルダーを表示。
初期状態の案内
Flush
アイテムをフル幅で表示。角丸なし、エッジまで広がる。
高密度リスト
Disabled Items
一部のアイテムを選択不可に。
利用不可なオプション

Sizes

xs
高さ36px
フォント13px
sm
高さ40px
フォント14px
default
高さ44px
フォント16px
lg
高さ48px
フォント16px
xl
高さ56px
フォント16px

API

Component Structure

Select— Radix Select
.TriggerProps.Value.ContentProps.ItemProps.Group.Label.Separator

Props

Select (Root)

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

Triggerの高さとフォントサイズ。Contentに自動伝播

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

角丸のサイズ (6px)。Triggerに直接適用、Contentに自動マッピング

valueundefined
string

制御モードの選択値

defaultValueundefined
string

非制御モードの初期値

onValueChangeundefined
(value: string) => void

値が変更された時のコールバック

nameundefined
string

フォーム送信用の名前

requiredundefined
boolean

必須フィールド指定

disabledundefined
boolean

全体を無効化

openundefined
boolean

制御モードの開閉状態

onOpenChangeundefined
(open: boolean) => void

開閉状態が変更された時のコールバック

Select.Trigger

disabledundefined
boolean

トリガーボタンを無効化

asChildfalse
boolean

子要素をトリガーとしてレンダリング

Select.Content

position"popper"
"item-aligned" | "popper"

ドロップダウンの配置方法

flushfalse
boolean

アイテムをフル幅で表示（パディングなし）

side"bottom"
"top" | "right" | "bottom" | "left"

ドロップダウンの表示方向（popper時のみ）

sideOffset1
number

トリガーからの距離（px）

Select.Item

value—
string

アイテムの値（必須）

disabledundefined
boolean

アイテムを選択不可に

textValueundefined
string

タイプアヘッド用のテキスト値

Customization

classNameでトリガーやコンテンツのスタイルをカスタマイズできます。

幅の変更

<Select.Content className="w-72">

フル幅トリガー

<Select.Trigger className="w-full">

Tip: 各サブコンポーネントはclassNameを受け取り、Tailwindクラスでスタイルを上書きできます。

Anatomy

1
2
3
Apple
4
5
6
Apple
7
Banana
Cherry
1
Root
コンポーネントルート
2
Trigger
セレクトを開くボタン
3
Value
選択値の表示
4
Chevron
開閉アイコン
5
Content
ドロップダウンパネル
6
Item
選択アイテム
7
Separator
区切り線

Best Practices

✓

推奨

  • ✓選択肢が5個以上ある場合に使用する
  • ✓選択肢が多い場合はGroupで分類する
  • ✓placeholderで選択内容を案内する
  • ✓フォーム内ではnameとrequiredを設定する
✕

避けるべき

  • ✗選択肢が3個以下ならRadioを検討
  • ✗アクション実行にはDropdownを使う
  • ✗複数選択が必要な場合は別UIを検討
  • ✗placeholderなしで初期値も未設定にしない

Accessibility

キーボード操作

Enterセレクト開閉 / アイテム選択
Spaceセレクト開閉 / アイテム選択
↑ ↓アイテム間を移動
Home最初のアイテムに移動
End最後のアイテムに移動
Escapeセレクトを閉じる

ARIA属性

  • role="listbox" Content自動付与
  • role="option" Item自動付与
  • aria-expanded Trigger状態管理
  • タイプアヘッドによる文字検索

Select vs Dropdown

見た目は似ていますが、用途と動作が異なります。適切なコンポーネントを選択してください。

用途

Select: 値の選択

Dropdown: アクションの実行

フォーム連携

Select: name / value 送信可能

Dropdown: なし

選択後の表示

Select: 選択値がトリガーに反映

Dropdown: メニューが閉じるだけ

アイテム種類

Select: 単一選択アイテム

Dropdown: Item, Checkbox, Radio, Sub

ユースケース

Select: 国選択、カテゴリー、ソート順

Dropdown: コンテキストメニュー、アカウント操作

選択の目安： ユーザーが値を選んでフォームに送信する場合は Select が適切です。クリック時にアクション（編集、削除、共有など）を実行する場合は Dropdown を使用してください。