Switch

A toggle control for switching between checked and unchecked states.

Enable notifications

1
---
2
import { Label } from '@bejamas/registry/ui/label';
3
import { Switch } from '@bejamas/registry/ui/switch';
4
---
5

6
<div class="flex items-center gap-3">
7
  <Switch id="notifications" />
8
  <Label for="notifications">Enable notifications</Label>
9
</div>

Installation

bunx bejamas add switch

npx bejamas add switch

pnpm dlx bejamas add switch

yarn dlx bejamas add switch

Usage

1
---
2
import { Switch } from '@bejamas/ui/components/switch';
3
import { Label } from '@bejamas/ui/components/label';
4
---
5

6
<div class="flex items-center gap-3">
7
  <Switch id="notifications" />
8
  <Label for="notifications">Enable notifications</Label>
9
</div>

Props

Prop	Type	Default
`class`	`string`	`""`
`id`	`string`	`""`
`size`	`"sm" \| "default"`	`"default"`
`checked`	`boolean`
`defaultChecked`	`boolean`
`name`	`string`
`value`	`string`
`uncheckedValue`	`string`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`“aria-invalid”`	`boolean \| "true" \| "false"`