Switch

Preview

Enable notifications

Source

---
import { Label } from '@bejamas/ui/components/label';
import { Switch } from '@bejamas/ui/components/switch';
---

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

Installation

CLI

bun

 bunx bejamas add switch

npm

 npx bejamas add switch

pnpm

 pnpm dlx bejamas add switch

yarn

 yarn dlx bejamas add switch

Manual

---
/**
 * @component Switch
 * @title Switch
 * @description A toggle control for switching between checked and unchecked states.
 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2509-4236&t=YFStJ3V8fXEO8QD8-4
 *
 * @status stable
 * @since 0.1.0
 *
 * @preview
 *
 * <div class="flex items-center gap-3">
 *   <Switch id="notifications" />
 *   <Label for="notifications">Enable notifications</Label>
 * </div>
 *
 * @usage
 *
 * ```astro
 * ---
 * import { Switch } from '@bejamas/ui/components/switch';
 * import { Label } from '@bejamas/ui/components/label';
 * ---
 *
 * <div class="flex items-center gap-3">
 *   <Switch id="notifications" />
 *   <Label for="notifications">Enable notifications</Label>
 * </div>
 * ```
 */

const { class: className = "", id = "", name = id, ...props } = Astro.props;

import { cn } from "@bejamas/ui/lib/utils";

const trackClass =
  "relative inline-flex h-5 w-8 shrink-0 items-center rounded-full border border-transparent bg-input transition-colors outline-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-focus-visible:border-ring peer-checked:bg-primary dark:bg-input/80";

const thumbClass =
  "pointer-events-none shadow-xs absolute left-0.5 ease-out duration-100 top-1/2 block size-4 -translate-y-1/2 translate-x-0 rounded-full bg-background ring-0 transition-transform peer-checked:translate-x-3 dark:bg-foreground dark:peer-checked:bg-primary-foreground";
---

<label class="inline-flex items-center gap-2 cursor-pointer">
  <span class="relative inline-flex items-center">
    <input
      id={id}
      name={name}
      type="checkbox"
      role="switch"
      class="sr-only peer"
      {...props}
      aria-checked={props.checked ?? undefined}
    />
    <span class={cn(trackClass, className)} aria-hidden="true"></span>
    <span class={thumbClass} aria-hidden="true"></span>
  </span>
  <slot />
</label>

Usage

---
import { Switch } from '@bejamas/ui/components/switch';
import { Label } from '@bejamas/ui/components/label';
---

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