Forms

Switch

A single `<input role="switch">`. v0 fired two different event shapes — a synthesised `{target:{checked}}` from a wrapper div's onClick, and the real onChange from the inner input — and which one you got depended on where you clicked.

data-scope="switch"

Usage

ReactVueSvelteAngular

<Switch label="Notifications" onChange={e => set(e.target.checked)} />

<Switch v-model="on" label="Notifications" />

<Switch bind:checked={on} label="Notifications" />

<ck-switch label="Notifications" [(checked)]="on" />

Props

Prop	Type	Default	Notes
`size`	"sm" \| "md" \| "lg"	`"md"`	Control size.
`label`	ReactNode	—	Label text.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.

Migrating from react-ui-toolkit

v0	v1	Notes
`two competing change events`	`one native change event`	Handlers that ran twice, or not at all, now run exactly once.