Checkbox

Stablev0.3.0

オン/オフの2つの状態を持つチェックボックスコンポーネント。複数選択や同意確認に使用します。

基本的な使い方

クリックで状態を切り替え

チェックボックス

状態: 未チェック

tsx

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

class="token keyword">const checked = class="token function">useSignal(class="token keyword">false);

<class="token tag">Checkbox
  checked={checked.value}
  onChange$={(v) => checked.value = v}
  label=class="token keyword">class="token string">"チェックボックス"
/>

状態

様々な状態のチェックボックス

未チェック

チェック済み

無効（未チェック）

無効

無効（チェック済み）

無効

利用規約への同意

よくあるユースケース

利用規約とプライバシーポリシーに同意します

通知設定

複数のチェックボックスグループ

通知を受け取る方法を選択:

メール通知

プッシュ通知

SMS通知

Props API

Prop	Type	Default	Description
`checked`	`boolean`	`false`	チェック状態
`disabled`	`boolean`	`false`	無効状態
`label`	`string`	-	ラベルテキスト
`onChange$`	`(checked: boolean) => void`	-	状態変更時のコールバック

Accessibility

ネイティブ checkbox 要素をラップし、アクセシビリティを確保
Spaceキーでトグル可能
ラベルをクリックしても状態が変更される
disabled 状態は視覚的かつ機能的に無効化