Toggle

Basic

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

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

is-disabled などのプロパティを使用してコンポーネントの状態（非活性など）を制御します。

jui-toggle — トグルスイッチ

HeroUI Switch インスパイア。 ON/OFF 切替、カラー、サイズ、ラベル対応。

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

Property	Attribute	Description	Type	Default
`checked`	`checked`	チェック状態	`boolean`	`false`
`color`	`color`	カラー	`"brand" \| "danger" \| "success" \| "warning"`	`'brand'`
`isDisabled`	`is-disabled`	無効状態	`boolean`	`false`
`label`	`label`	ラベル（Slotでも代替可）	`string`	`''`
`name`	`name`	フォーム名	`string`	`''`
`size`	`size`	サイズ	`"lg" \| "md" \| "sm"`	`'md'`
`switchLabel`	`switch-label`	aria-label（i18n対応）	`string`	`''`

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

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

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

Slot	Description
	ラベルテキスト

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

Built with StencilJS