Select

Stablev0.3.0

ドロップダウン形式で選択肢から値を選択するコンポーネント。フォームでの選択入力に使用します。

基本的な使い方

シンプルなセレクト

tsx

class="token keyword">import { Select } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

class="token keyword">const options = [
  { value: class="token keyword">class="token string">"apple", label: class="token keyword">class="token string">"Apple" },
  { value: class="token keyword">class="token string">"banana", label: class="token keyword">class="token string">"Banana" },
  { value: class="token keyword">class="token string">"orange", label: class="token keyword">class="token string">"Orange" },
];

<class="token tag">Select
  options={options}
  placeholder=class="token keyword">class="token string">"フルーツを選択"
  value={selected.value}
  onChange$={(value) => selected.value = value}
/>

状態

様々な状態のセレクト

通常

選択済み

無効

エラー

無効な選択肢

特定の選択肢を無効化

tsx

class="token keyword">const options = [
  { value: class="token keyword">class="token string">"jp", label: class="token keyword">class="token string">"Japan" },
  { value: class="token keyword">class="token string">"us", label: class="token keyword">class="token string">"United States" },
  { value: class="token keyword">class="token string">"de", label: class="token keyword">class="token string">"Germany", disabled: class="token keyword">true },
];

<class="token tag">Select options={options} placeholder=class="token keyword">class="token string">"国を選択" />

Props API

Prop	Type	Default	Description
`options`required	`SelectOption[]`	-	選択肢の配列 { value, label, disabled? }
`value`	`string`	-	選択された値
`placeholder`	`string`	-	プレースホルダーテキスト
`disabled`	`boolean`	`false`	無効状態
`error`	`boolean`	`false`	エラー状態

Accessibility

ネイティブ select 要素を使用し、スクリーンリーダー対応
キーボードナビゲーション（上下矢印、Enter）対応
disabled オプションは選択不可
フォーカス時に明確なアウトラインを表示