Switch

@/components/kamod-ui/switch

Share across devices

Keep your settings synced when switching devices.

Installation

Import Switch from `@/components/kamod-ui/switch`.

pnpm add @kamod-ch/ui

Usage

Use defaultChecked for local state, or checked with onCheckedChange for controlled usage. The size prop supports compact layouts, while aria-invalid and disabled help communicate state clearly.

import { Switch } from "@/components/kamod-ui/switch";

<Switch />

Description

A modern settings row with concise helper text and a trailing switch.

Choice Card

Card-like options with clear labels and independent switches.

Enable notifications

Receive updates when important events happen.

Marketing updates

Get product news, feature launches and offers.

Disabled & Invalid

Show disabled and validation states to communicate constraints quickly.

Disabled option

Accept terms

Size

Use structured setting rows to compare compact and default controls.

Compact

Space-saving for dense panels.

Default

Balanced for regular forms.

API Reference

Props, slots and variants for this component.

Switch

Switch component props and accepted values.

Prop	Type	Default
size	`"default" \| "sm"`	`"default"`
defaultChecked	`boolean`	`false`
checked	`boolean`	`uncontrolled`
onCheckedChange	`(next: boolean) => void`	`undefined`
disabled	`boolean`	`false`
aria-invalid	`boolean`	`false`

Accessibility Notes

Provide a clear label with visible text or aria-label. Use switch for immediate on/off settings and use checkbox semantics when the value is part of form submission.