PackagesUIComponentsForms
Selections
選択系コンポーネント。Select はドロップダウン、Checkbox・RadioGroup・Switch はトグル系の入力に使用する。
いつ使うか
- ドロップダウンから1つ選択させる場合は
Selectを使用する - ON/OFF のトグルには
CheckboxまたはSwitchを使用する - 複数の排他的選択肢から1つを選ばせる場合は
RadioGroupを使用する
いつ使わないか
- 自由テキスト入力には
TextInput/Textareaを使用する - 選択肢が2つだけの排他的選択は
Switchで代替できる
Select
Usage
import { Select } from '@bi-shop-it/ui/select';
<Select
options={[
{ label: 'りんご', value: 'apple' },
{ label: 'バナナ', value: 'banana' },
]}
placeholder="選択してください"
/>;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
options | (SelectOption | SelectOptionGroup)[] | — | 選択肢の配列 |
placeholder | string | — | プレースホルダーテキスト |
value | string | — | 選択中の値（制御モード） |
defaultValue | string | — | 初期値（非制御モード） |
name | string | — | フォームのフィールド名 |
id | string | — | HTML id属性 |
error | boolean | false | エラー状態 |
disabled | boolean | false | 無効化 |
required | boolean | — | 必須入力 |
onValueChange | (value: string) => void | — | 値変更時のコールバック |
デフォルト
<Select
options={[
{ label: 'りんご', value: 'apple' },
{ label: 'バナナ', value: 'banana' },
{ label: 'オレンジ', value: 'orange' },
]}
placeholder="選択してください"
/>グループ付き
SelectOptionGroup を使用して選択肢をグループ化できる。
<Select
options={[
{
label: 'フルーツ',
options: [
{ label: 'りんご', value: 'apple' },
{ label: 'バナナ', value: 'banana' },
],
},
{
label: '野菜',
options: [
{ label: 'にんじん', value: 'carrot' },
{ label: 'トマト', value: 'tomato' },
],
},
]}
placeholder="カテゴリから選択"
/>Disabled
<Select disabled options={options} placeholder="選択できません" />Error
<Select error options={options} placeholder="選択してください" />Checkbox
Usage
import { Checkbox } from '@bi-shop-it/ui/checkbox';
<Checkbox label="利用規約に同意する" />;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label | string | — | ラベルテキスト |
description | string | — | 補足説明 |
checked | boolean | — | チェック状態（制御モード） |
defaultChecked | boolean | — | 初期状態（非制御モード） |
id | string | — | HTML id属性 |
name | string | — | フォームのフィールド名 |
error | boolean | false | エラー状態 |
disabled | boolean | false | 無効化 |
required | boolean | — | 必須入力 |
onCheckedChange | (checked: boolean) => void | — | 値変更時のコールバック |
デフォルト
<Checkbox label="利用規約に同意する" />Description 付き
マーケティングメールを受け取ります
<Checkbox
description="マーケティングメールを受け取ります"
label="メール通知を受け取る"
/>Disabled
<Checkbox disabled label="無効なチェックボックス" />Error
<Checkbox error label="必須項目です" />RadioGroup
Usage
import { RadioGroup } from '@bi-shop-it/ui/radio-group';
<RadioGroup
options={[
{ label: 'S', value: 'sm' },
{ label: 'M', value: 'md' },
{ label: 'L', value: 'lg' },
]}
/>;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
options | RadioOption[] | — | 選択肢の配列 |
value | string | — | 選択中の値（制御モード） |
defaultValue | string | — | 初期値（非制御モード） |
name | string | — | フォームのフィールド名 |
error | boolean | false | エラー状態 |
disabled | boolean | false | 無効化 |
required | boolean | — | 必須入力 |
onValueChange | (value: string) => void | — | 値変更時のコールバック |
デフォルト
<RadioGroup
options={[
{ label: 'S', value: 'sm' },
{ label: 'M', value: 'md' },
{ label: 'L', value: 'lg' },
]}
/>Description 付き
個人利用向け、5GBまで
チーム利用、100GBまで
無制限ストレージ、優先サポート
<RadioGroup
options={[
{ description: '個人利用向け', label: 'フリー', value: 'free' },
{ description: 'チーム利用', label: 'プロ', value: 'pro' },
{ description: '無制限', label: 'エンタープライズ', value: 'enterprise' },
]}
/>Disabled
<RadioGroup disabled options={options} />Error
<RadioGroup error options={options} />Switch
Usage
import { Switch } from '@bi-shop-it/ui/switch';
<Switch label="通知を有効にする" />;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label | string | — | ラベルテキスト |
description | string | — | 補足説明 |
checked | boolean | — | ON/OFF状態（制御モード） |
defaultChecked | boolean | — | 初期状態（非制御モード） |
id | string | — | HTML id属性 |
name | string | — | フォームのフィールド名 |
error | boolean | false | エラー状態 |
disabled | boolean | false | 無効化 |
required | boolean | — | 必須入力 |
onCheckedChange | (checked: boolean) => void | — | 値変更時のコールバック |
デフォルト
<Switch label="通知を有効にする" />Description 付き
新しいメッセージが届いたときにプッシュ通知を送信します
<Switch
description="新しいメッセージが届いたときにプッシュ通知を送信します"
label="プッシュ通知"
/>Disabled
<Switch disabled label="無効なスイッチ" />アクセシビリティ
コンポーネントが内部で処理すること
Checkbox/Switchはlabelと自動的にhtmlForで関連付けられるRadioGroupは各アイテムのラベルと自動関連付けされるerrorがtrueのときaria-invalidを自動付与する- Radix UI のアクセシビリティ機能（キーボード操作、ARIA属性）を内部で利用する
利用者が対応すること
Checkbox/Switchのlabelは操作内容が明確に伝わるテキストにすることRadioGroupの各option.labelは選択肢の内容が明確に伝わるテキストにすること- エラーメッセージの表示には
FormFieldと組み合わせて使用すること
関連コンポーネント
FormField— ラベル・説明・エラーメッセージ付きのフォームフィールドラッパーTextInput/Textarea— テキスト入力が必要な場合に使用するSelect— ドロップダウンで選択させる場合に使用する