Switch

A toggle switch component with smooth transition animation for boolean on/off settings.

Import

import { Switch } from '@mks2508/mks-ui/react';

.tsx

<Switch />
<Switch defaultChecked />

Enable notifications

.tsx

<div className="flex items-center gap-2">
<Switch id="notifications" />
<Label htmlFor="notifications">Enable notifications</Label>
</div>

const [enabled, setEnabled] = useState(false);

<Switch checked={enabled} onCheckedChange={setEnabled} />

.tsx

<Switch disabled />
<Switch disabled defaultChecked />

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state
`defaultChecked`	`boolean`	`false`	Initial state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	—	Change handler
`disabled`	`boolean`	`false`	Disable interactions
`className`	`string`	—	Additional CSS classes