Switch

On/off toggle switch.

import { Switch } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<Switch
  label="Marketing emails"
  description="Receive emails about new products and features"
/>

<Switch label="Small switch" size="sm" />

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Initial checked state for uncontrolled mode.
`onChange`	`(checked: boolean) => void`	—	Callback when checked state changes.
`disabled`	`boolean`	`false`	Disable the switch.
`label`	`string`	—	Label text displayed next to the switch.
`description`	`string`	—	Description text displayed below the label.
`size`	`'sm' \| 'md'`	`'md'`	Size preset.
`class`	`string`	—	Additional CSS classes.
`unstyled`	`boolean`	`false`	Remove all default styling classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.