Checkbox

フォームで複数の選択肢から1つ以上を選択するためのコンポーネント。利用規約への同意やフィルター設定に使用します。

Basic

jui-checkbox の最も基本的な使用例です。

checked 属性を使用して、チェックボックスの選択・未選択状態を制御します。

disabled プロパティを使用してチェックボックスを無効化します。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`:checked + sibling`	チェック状態スタイル	全ver	全ver	全ver	Baseline
`:has()`	親要素の状態反映	105+	121+	15.4+	Baseline 2023
`color-mix()`	カラー生成	111+	113+	16.4+	Baseline 2023

💡 すべての機能が Baseline 2023 以降に対応しており、モダンブラウザで問題なく動作します。

WAI-ARIA:
- 内部でネイティブの <input type="checkbox"> 要素が生成され、チェックボックスとしての標準的なセマンティクス（チェック状態のスクリーンリーダーへの伝達など）が保証されます。
- 全体が <label> 要素で囲まれ、htmlFor でネイティブ <input> と関連付けられます。label Prop またはデフォルト slot で渡したテキストがアクセシブルな名前になります（slot が優先）。
- チェックマークを描画する装飾用の <span> / <svg> には aria-hidden="true" が付与され、支援技術からは無視されます。
- checked は <input> の checked 属性に反映され、name / value はフォーム送信に用いられます（formAssociated によりネイティブフォームへ参加します）。
キーボードナビゲーション:
- ネイティブの <input type="checkbox"> を使用しているため、Tab でフォーカスでき、Space でチェックの ON/OFF を切り替えられます。
- disabled の時はネイティブ <input> に disabled 属性が付与され、フォーカス順および操作の対象から除外されます。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`checked`	`checked`	チェック状態	`boolean`	`false`
`disabled`	`disabled`	無効状態	`boolean`	`false`
`label`	`label`	ラベルテキスト。Slotでも代替可	`string`	`''`
`name`	`name`	フォームのname属性	`string`	`''`
`value`	`value`	フォーム送信時の値	`string`	`''`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	チェック状態が変更されたときに発火するイベント	`CustomEvent<{ checked: boolean; }>`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	ラベルテキスト（label Prop より優先）

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
`"checkbox"`	チェックボックスの外枠（スクエア）
`"label"`	ラベル要素

Built with StencilJS