CheSelectBox

CheSelectBox は、単一選択と複数選択に対応したセレクトボックスコンポーネントです。shadcn/ui (base-nova) ベースで構築しており、内部では @base-ui/react の Select を利用しています。

multiple を付けると複数選択に切り替わり、value / defaultValue / onValueChange の型も single と multiple で自動的に切り替わります。

基本

デフォルトは single select です。defaultValue で初期値を指定でき、invalid で未選択時のエラー状態を表現できます。

プレビュー

未選択
選択済み
error

使用例

<CheSelectBox
  options={[
    { value: "apple", label: "りんご" },
    { value: "banana", label: "バナナ" },
    { value: "grape", label: "ぶどう" },
  ]}
  placeholder="選択してください"
/>

マルチセレクト

multiple を true にすると、複数の選択肢を同時に選択できます。選択後も popup は閉じず、選択済み項目はトリガー内にチップ表示されます。

プレビュー

未選択
選択済み（2件）
error

使用例

<CheSelectBox
  multiple
  options={[
    { value: "apple", label: "りんご" },
    { value: "banana", label: "バナナ" },
    { value: "grape", label: "ぶどう" },
  ]}
  defaultValue={["apple", "banana"]}
  placeholder="選択してください"
/>

Controlled（インタラクティブデモ）

single は string、multiple は string[] で制御します。

single
選択中: ぶどう
multiple
選択中: りんご, ぶどう

詳細

無効化

コンポーネント全体は disabled、個別の選択肢は options[].disabled で無効化できます。

コンポーネントの無効化
single / disabled
multiple / disabled
選択肢単位の無効化
single
multiple

Popup 挙動

modal を false にすると、popup を開いたままページ全体をスクロールできます。

現在: ON（ページスクロールをロック）

幅

single は最小 147px / 最大 375px の範囲で表示され、長いラベルは省略されます。multiple は className で最大幅を広げられます。

single: 長いラベルは最大 375px で省略
multiple: className で最大幅を 750px まで拡張

Props

属性詳細型デフォルト必須
options選択肢リストSelectOption[]—Yes
multiple複数選択モードbooleanfalseNo
value制御された選択値string | string[]—No
defaultValue初期値（非制御時）string | string[]—No
onValueChange値変更コールバック(value: string, event) => void | (value: string[], event) => void—No
placeholderプレースホルダーテキストstring—No
disabled無効化booleanfalseNo
invalidエラー状態booleanfalseNo
modalpopup 展開時のモーダル化booleantrueNo
nameフォームのフィールド名string—No
className追加CSSクラスstring—No

multiple の値に応じて value / defaultValue / onValueChange の型が TypeScript の discriminated union で自動的に切り替わります。

SelectOption

属性詳細型デフォルト必須
value値string—Yes
label表示テキストstring—Yes
disabled選択肢の無効化booleanfalseNo