フォームコントロール (Form Controls)

チェックボックス、ラジオボタン、スイッチなど、ユーザーの選択を受け取るためのフォームコンポーネントです。

チェックボックス (Checkbox)

基本

基本のCode:

<div class=“form-check”>
  <input type=“checkbox” id=“check1” class=“checkbox checkbox-md” />
  <label for=“check1” class=“form-check-label”>利用規約に同意する</label>
</div>

サイズ

サイズのCode:

<!— 小さいサイズ —>
<div class=“form-check form-check-sm”>
  <input type=“checkbox” id=“check-sm” class=“checkbox checkbox-sm” checked />
  <label for=“check-sm” class=“form-check-label form-check-label-sm”>小さいサイズ</label>
</div>

<!— 標準サイズ —>
<div class=“form-check”>
  <input type=“checkbox” id=“check-md” class=“checkbox checkbox-md” checked />
  <label for=“check-md” class=“form-check-label”>標準サイズ</label>
</div>

<!— 大きいサイズ —>
<div class=“form-check form-check-lg”>
  <input type=“checkbox” id=“check-lg” class=“checkbox checkbox-lg” checked />
  <label for=“check-lg” class=“form-check-label form-check-label-lg”>大きいサイズ</label>
</div>

エラー状態

この項目は必須です

エラー状態のCode:

<div class=“form-check”>
  <input type=“checkbox” id=“check-error” class=“checkbox checkbox-md checkbox-error” />
  <label for=“check-error” class=“form-check-label”>必須項目</label>
</div>
<p class=“error-text”>この項目は必須です</p>

ラジオボタン (Radio)

基本

基本のCode:

<div class=“form-check”>
  <input type=“radio” id=“radio1” name=“plan” class=“radio radio-md” value=“basic” />
  <label for=“radio1” class=“form-check-label”>ベーシックプラン</label>
</div>

<div class=“form-check”>
  <input type=“radio” id=“radio2” name=“plan” class=“radio radio-md” value=“standard” checked />
  <label for=“radio2” class=“form-check-label”>スタンダードプラン</label>
</div>

サイズ

サイズのCode:

<!— 小さいサイズ —>
<div class=“form-check form-check-sm”>
  <input type=“radio” id=“radio-sm” name=“size-demo” class=“radio radio-sm” checked />
  <label for=“radio-sm” class=“form-check-label form-check-label-sm”>小さいサイズ</label>
</div>

<!— 標準サイズ —>
<div class=“form-check”>
  <input type=“radio” id=“radio-md” name=“size-demo” class=“radio radio-md” />
  <label for=“radio-md” class=“form-check-label”>標準サイズ</label>
</div>

<!— 大きいサイズ —>
<div class=“form-check form-check-lg”>
  <input type=“radio” id=“radio-lg” name=“size-demo” class=“radio radio-lg” />
  <label for=“radio-lg” class=“form-check-label form-check-label-lg”>大きいサイズ</label>
</div>

エラー状態

選択肢を1つ選んでください

エラー状態のCode:

<div class=“form-check”>
  <input type=“radio” id=“radio-error1” name=“error-demo” class=“radio radio-md radio-error” />
  <label for=“radio-error1” class=“form-check-label”>選択肢A</label>
</div>
<div class=“form-check”>
  <input type=“radio” id=“radio-error2” name=“error-demo” class=“radio radio-md radio-error” />
  <label for=“radio-error2” class=“form-check-label”>選択肢B</label>
</div>
<p class=“error-text”>選択肢を1つ選んでください</p>

スイッチ (Switch)

基本

オフ状態
オン状態
無効状態

基本のCode:

<div class=“switch-group”>
  <label class=“switch switch-md”>
    <input type=“checkbox” />
    <span class=“switch-slider”></span>
  </label>
  <span class=“text-sm text-gray-700”>設定を有効にする</span>
</div>

サイズ

小さいサイズ
標準サイズ
大きいサイズ

サイズのCode:

<!— 小さいサイズ —>
<div class=“switch-group switch-group-sm”>
  <label class=“switch switch-sm”>
    <input type=“checkbox” checked />
    <span class=“switch-slider”></span>
  </label>
  <span class=“text-xs text-gray-700”>小さいサイズ</span>
</div>

<!— 標準サイズ —>
<div class=“switch-group”>
  <label class=“switch switch-md”>
    <input type=“checkbox” checked />
    <span class=“switch-slider”></span>
  </label>
  <span class=“text-sm text-gray-700”>標準サイズ</span>
</div>

<!— 大きいサイズ —>
<div class=“switch-group switch-group-lg”>
  <label class=“switch switch-lg”>
    <input type=“checkbox” checked />
    <span class=“switch-slider”></span>
  </label>
  <span class=“text-base text-gray-700”>大きいサイズ</span>
</div>

実用例

プッシュ通知
新しいメッセージの通知を受け取る
ダークモード
インターフェースのテーマを変更
自動保存
編集内容を自動的に保存する

実用例のCode:

<div class=“switch-group”>
  <label class=“switch switch-md”>
    <input type=“checkbox” checked />
    <span class=“switch-slider”></span>
  </label>
  <div>
    <div class=“text-sm font-medium text-gray-900”>プッシュ通知</div>
    <div class=“text-xs text-gray-600”>新しいメッセージの通知を受け取る</div>
  </div>
</div>

実用的なパターン

権限設定

お支払い方法

アプリ設定

プッシュ通知
新着情報を受け取る
ダークモード
外観テーマを変更
自動保存
編集内容を自動保存
解析データ
使用状況データを共有

権限設定のCode:

<div class=“space-y-3”>
  <div class=“form-check”>
    <input type=“checkbox” id=“perm1” class=“checkbox checkbox-md” checked />
    <label for=“perm1” class=“form-check-label”>読み取り権限</label>
  </div>
  <div class=“form-check”>
    <input type=“checkbox” id=“perm2” class=“checkbox checkbox-md” checked />
    <label for=“perm2” class=“form-check-label”>書き込み権限</label>
  </div>
</div>

お支払い方法のCode:

<div class=“space-y-3”>
  <div class=“form-check”>
    <input type=“radio” id=“pay1” name=“payment” class=“radio radio-md” value=“credit” checked />
    <label for=“pay1” class=“form-check-label”>クレジットカード</label>
  </div>
  <div class=“form-check”>
    <input type=“radio” id=“pay2” name=“payment” class=“radio radio-md” value=“bank” />
    <label for=“pay2” class=“form-check-label”>銀行振込</label>
  </div>
</div>

アプリ設定のCode:

<div class=“space-y-4”>
  <div class=“switch-group”>
    <label class=“switch switch-md”>
      <input type=“checkbox” checked />
      <span class=“switch-slider”></span>
    </label>
    <div class=“flex-1”>
      <div class=“text-sm font-medium text-gray-900”>プッシュ通知</div>
      <div class=“text-xs text-gray-600”>新着情報を受け取る</div>
    </div>
  </div>
</div>

アクセシビリティ

  • • 各入力要素には対応するlabel要素を適切に関連付け
  • • キーボード操作（Tab、Space、矢印キー）に対応
  • • エラー状態ではaria-invalidとaria-describedbyを使用
  • • フォーカス表示が明確に見える
  • • 色だけでなく形状でも状態を表現
  • • 十分なタッチターゲットサイズ（44px以上推奨）
  • • スイッチはオン・オフ状態が視覚的に明確に区別できる
  • • スイッチには状態を説明するラベルまたはaria-labelを提供
アクセシブルなスイッチ