Switch
A toggle control for switching between checked and unchecked states.
---import Label from '@bejamas/ui/components/Label.astro';import Switch from '@bejamas/ui/components/Switch.astro';---
<div class="flex items-center gap-3"> <Switch id="notifications" /> <Label for="notifications">Enable notifications</Label></div>Installation
Section titled “Installation” bunx bejamas add switch npx bejamas add switch pnpm dlx bejamas add switch yarn dlx bejamas add switch---/** * @component Switch * @title Switch * @description A toggle control for switching between checked and unchecked states. * @status stable * @since 0.1.0 * * @preview * * <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>