Toggle

ON/OFFの切り替えを行うスイッチコンポーネント。設定のオン・オフや機能の有効化に使用します。

Basic

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

size プロパティを使用してコンポーネントの大きさを変更します。

color プロパティを使用してコンポーネントのカラーテーマを変更します。

checked 属性を使用して、スイッチのオン・オフ状態を制御します。

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

機能	用途	Chrome	Firefox	Safari	ステータス
`:checked + sibling`	ON/OFF 状態スタイル	全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"> 要素が生成され、ON/OFF を表すチェックボックスとしての標準的なセマンティクスが保証されます。
- 全体が <label> 要素で囲まれ、htmlFor でネイティブ <input> と関連付けられます。label Prop またはデフォルト slot で渡したテキストがラベルになります（slot が優先）。
- 視覚的なラベルを表示しない場合は、switchLabel Prop を指定するとネイティブ <input> に aria-label が付与され、アクセシブルな名前を補えます（i18n 対応）。
- トラックとつまみを描画する <span> は装飾要素です。checked 状態と value（既定値 'on'）はフォーム送信に用いられます（formAssociated によりネイティブフォームへ参加します）。
キーボードナビゲーション:
- ネイティブの <input type="checkbox"> を使用しているため、Tab でフォーカスでき、Space で ON/OFF を切り替えられます。
- disabled の時はネイティブ <input> に disabled 属性が付与され、フォーカス順および操作の対象から除外されます。

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

Property	Attribute	Description	Type	Default
`checked`	`checked`	チェック状態	`boolean`	`false`
`color`	`color`	カラー	`"brand" \| "danger" \| "success" \| "warning"`	`'brand'`
`disabled`	`disabled`	無効状態	`boolean`	`false`
`label`	`label`	ラベル（slot でも代替可）	`string`	`''`
`name`	`name`	フォーム名	`string`	`''`
`size`	`size`	サイズ	`"lg" \| "md" \| "sm"`	`'md'`
`switchLabel`	`switch-label`	aria-label（i18n対応）	`string`	`''`
`value`	`value`	フォーム送信値（checked 時に送信。未指定なら ‘on’）	`string`	`'on'`

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

Event	Description	Type
`juiChange`	値が変更された時	`CustomEvent<{ checked: boolean; }>`

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

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

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

Built with StencilJS