Select

あらかじめ決まった選択肢の中から 1 つを選ばせる入力パーツ。トリガークリックでメニューが開き、選んだ項目が値として確定する。

プレビュー(動作デモ)

実際に開閉・選択ができます。キーボード (↑↓ / Enter / Esc / Home / End) でも操作可能。

ステータス

選択中: (未選択)

担当者 (未選択にできる)

選択中: (未選択)

メニューを開いて ↑↓ で項目移動、Enter / Space で決定、Esc で閉じる。

横幅

横幅は固定の variant を持たず、選択肢の最長ラベルに応じて配置時に決める。次の範囲内で選ぶ。

項目	値
最小幅	160px(短い enum — はい/いいえ、優先度、ON/OFF、対応中/完了等)
最大幅	480px

480px を超える長さの選択肢が必要な場合は Combobox(検索付き) を使用する。メニュー(展開時の選択肢リスト)は trigger と同じ幅で表示する。

状態

Normal

Focus

Error

Disabled

ステータス

import { Select } from "@/components/Select";

const OPTIONS = [
  { value: "new", label: "新規" },
  { value: "in_progress", label: "対応中" },
  { value: "done", label: "完了" },
];

<div style={{ width: "320px" }}>
  <Select
    className="w-full"
    label="ステータス"
    options={OPTIONS}
  />
</div>

仕様

トリガー

高さ 40px (標準コンポーネント高さ / M-size button と同じ) / radius 4px / padding 8px 12px
テキスト 14px (font-size-s)、右に ▼ / ▲ (16px) インジケーター
Normal: 1px gray border / Hover: bg rgba(31,41,55,0.08)
Open: 2px blue border + padding 1px 補正でコンテンツ非シフト
Error: 1px red border / Disabled: bg #F5F7FA
placeholder 表示時は text-disabled 色

メニュー

トリガー直下 2px 離れに浮く (z-index overlap)
White bg / radius 8px / shadow 0 2px 4px 1px rgba(31,41,55,0.30) (LAYER2)
項目 40px 高さ / padding 8px 12px / font 14px (font-size-s)
選択中: 青文字 + medium / Highlight: 薄グレー bg
max-height 320px、超過は内部スクロール
clearable で先頭に「未選択」項目を追加 (値 null に戻す)

キーボード操作

閉じている時: ↓ ↑ Enter Space でメニューを開く
開いている時: ↓ ↑ で項目移動、Home / End で先頭/末尾、Enter / Space で決定、Esc / Tab で閉じる
マウスホバーでもハイライト移動

利用基準

使うべき時

選択肢が 4 個以上で、画面に常時表示する必要がない場合
顧客のステータス / 担当者など属性値の変更
「未選択」を許容するなら clearable で先頭にクリア項目を入れる

使わない時

選択肢が 2〜5 個で常時比較したい → Radio Button を使用
複数選択を許容したい → Checkbox / Combobox マルチセレクトを使用
選択肢を入力で絞り込みたい → Combobox を使用
画面の表示モード切替 → Segmented Control / Tabs を使用

Figma

Figma で Select コンポーネントを開く ↗