Checkbox

チェックボックスコンポーネント。複数の選択肢から1つ以上を選択する際に使用します。Radix UIベースで実装されています。

基本的な使い方

Preview

ラベル付き

label propでラベルを追加できます。

Preview

チェック済み状態

Preview

無効状態

Preview

エラー状態

Preview

複数のチェックボックス

Preview

制御されたコンポーネント

Preview

Props

Prop	Type	Default	Description
`label`	`string`	-	チェックボックスのラベル
`checked`	`boolean`	-	チェック状態（制御コンポーネント）
`defaultChecked`	`boolean`	-	初期チェック状態
`onCheckedChange`	`(checked: boolean) => void`	-	チェック状態が変更されたときのコールバック
`disabled`	`boolean`	`false`	無効状態
`variant`	`'default' \| 'error'`	`'default'`	バリアント
`id`	`string`	-	HTML id属性
`name`	`string`	-	HTML name属性
`value`	`string`	-	HTML value属性
`required`	`boolean`	`false`	必須フィールド
`className`	`string`	-	追加のCSSクラス

アクセシビリティ

キーボード対応: Spaceキーでチェック/チェック解除
フォーカスインジケータ: フォーカス時に明確な視覚的フィードバック
ラベルクリック: ラベルをクリックしてもチェックできる
ARIA属性: 適切なARIA属性が自動的に付与される
スクリーンリーダー: チェック状態が正確に伝わる

使用例

利用規約の同意:

import { Checkbox, Button } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function TermsAgreement() {
  const [agreed, setAgreed] = useState(false)

  return (
    <div className="space-y-4">
      <Checkbox
        label="利用規約とプライバシーポリシーに同意する"
        checked={agreed}
        onCheckedChange={setAgreed}
      />
      <Button variant="primary" disabled={!agreed}>
        アカウントを作成
      </Button>
    </div>
  )
}

複数選択のフィルター:

import { Checkbox } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function CategoryFilter() {
  const [selectedCategories, setSelectedCategories] = useState<string[]>([])

  const categories = [
    { id: 'tech', label: 'テクノロジー' },
    { id: 'design', label: 'デザイン' },
    { id: 'business', label: 'ビジネス' },
    { id: 'marketing', label: 'マーケティング' },
  ]

  const handleToggle = (categoryId: string) => {
    setSelectedCategories(prev =>
      prev.includes(categoryId)
        ? prev.filter(id => id !== categoryId)
        : [...prev, categoryId]
    )
  }

  return (
    <div className="space-y-3">
      <h3 className="font-semibold">カテゴリーで絞り込む</h3>
      {categories.map(category => (
        <Checkbox
          key={category.id}
          label={category.label}
          checked={selectedCategories.includes(category.id)}
          onCheckedChange={() => handleToggle(category.id)}
        />
      ))}
      <p className="text-sm text-text-secondary">
        選択中: {selectedCategories.length}件
      </p>
    </div>
  )
}

全選択機能:

import { Checkbox } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function SelectAll() {
  const [items, setItems] = useState([
    { id: '1', label: 'アイテム 1', checked: false },
    { id: '2', label: 'アイテム 2', checked: false },
    { id: '3', label: 'アイテム 3', checked: false },
    { id: '4', label: 'アイテム 4', checked: false },
  ])

  const allChecked = items.every(item => item.checked)
  const someChecked = items.some(item => item.checked) && !allChecked

  const handleSelectAll = (checked: boolean) => {
    setItems(items.map(item => ({ ...item, checked })))
  }

  const handleToggleItem = (id: string) => {
    setItems(items.map(item =>
      item.id === id ? { ...item, checked: !item.checked } : item
    ))
  }

  return (
    <div className="space-y-3">
      <Checkbox
        label="すべて選択"
        checked={allChecked}
        // indeterminate={someChecked} // 部分選択状態
        onCheckedChange={handleSelectAll}
      />
      <div className="ml-6 space-y-2 border-l-2 pl-4">
        {items.map(item => (
          <Checkbox
            key={item.id}
            label={item.label}
            checked={item.checked}
            onCheckedChange={() => handleToggleItem(item.id)}
          />
        ))}
      </div>
    </div>
  )
}

フォーム検証:

import { Checkbox, Button } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function FormWithValidation() {
  const [agreed, setAgreed] = useState(false)
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (e) => {
    e.preventDefault()
    setSubmitted(true)
    if (!agreed) {
      return
    }
    // フォーム送信処理
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <Checkbox
        label="利用規約に同意する"
        checked={agreed}
        onCheckedChange={setAgreed}
        variant={submitted && !agreed ? 'error' : 'default'}
      />
      {submitted && !agreed && (
        <p className="text-sm text-error">
          利用規約への同意が必要です
        </p>
      )}
      <Button type="submit" variant="primary">
        送信
      </Button>
    </form>
  )
}