Switch

On/off toggle.

Enable notifications

Installation

npx @noarka/cli add switch

tsx

import { Switch } from "@noarka/ui";

tsx

<label className="flex cursor-pointer items-center gap-2 text-sm">  <Switch defaultChecked /> Airplane mode</label>

States

On, off, and disabled side by side.

On Off Disabled

With description

Pair the label with helper text for longer explanations.

Marketing emailsOccasional product news, no spam.

Settings list

Stacked toggle rows separated by dividers.

Push notificationsEmail digestsSMS alerts

Switch

Prop	Type	Default
`checked` Controlled checked state. Use with onCheckedChange.	`boolean`	`-`
`defaultChecked` Initially checked when uncontrolled.	`boolean`	`false`
`onCheckedChange` Called when the switch is flipped.	`(checked: boolean) => void`	`-`
`disabled` Ignore user interaction. Renders at half opacity.	`boolean`	`false`
`readOnly` Show state without allowing flips.	`boolean`	`false`
`required` Require the switch to be on before form submit.	`boolean`	`false`
`name` Identifies the field when the form is submitted.	`string`	`-`
`value` Value submitted with the form when on.	`string`	`-`
`render` Polymorphic render prop. Use to render a custom element.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default switch styles.	`string`	`-`