KARAKURIDESIGN SYSTEM

Select

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

2
Position
5
Sizes
Form
Sync
Radix
Base

Playground

Preview
default
Size
Radius
Position
Flush
Disabled
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
    <SelectItem value="grape">Grape</SelectItem>
  </SelectContent>
</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"

トリガーとアイテムのサイズ（Inputと同じ5段階。アイテムは自動マッピング）

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

Trigger + Contentの角丸（Inputと同じ9段階。Contentは自動マッピング）

valueundefined
string

選択値（制御モード）

defaultValueundefined
string

初期値（非制御モード）

onValueChangeundefined
(value: string) => void

値変更時のコールバック

nameundefined
string

フォーム送信時のフィールド名

requiredundefined
boolean

フォーム必須フィールド

disabledundefined
boolean

全体を無効化

openundefined
boolean

開閉状態（制御モード）

onOpenChangeundefined
(open: boolean) => void

開閉時のコールバック

SelectTrigger

disabledundefined
boolean

無効状態

asChildfalse
boolean

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

SelectContent

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

コンテンツの表示方式

flushfalse
boolean

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

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

コンテンツの表示方向（popper時のみ）

sideOffset1
number

トリガーからの距離 (px)

SelectItem

value—
string

アイテムの値（必須）

disabledundefined
boolean

無効状態

textValueundefined
string

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

Customization

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

幅の変更

<SelectContent className="w-72">

フル幅トリガー

<SelectTrigger className="w-full">

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

Select vs Dropdown

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

用途

Select: 値の選択

Dropdown: アクションの実行

フォーム連携

Select: name / value 送信可能

Dropdown: なし

選択後の表示

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

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

アイテム種類

Select: 単一選択アイテム

Dropdown: Item, Checkbox, Radio, Sub

ユースケース

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

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

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