Label

Preview

Accept terms and conditions

Source

---
import Checkbox from '@bejamas/ui/components/Checkbox.astro';
import Label from '@bejamas/ui/components/Label.astro';
---

<div class="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>

Installation

CLI

bun

 bunx bejamas add label

npm

 npx bejamas add label

pnpm

 pnpm dlx bejamas add label

yarn

 yarn dlx bejamas add label

Manual

---
/**
 * @component Label
 * @title Label
 * @description A text label for form controls.
 *
 * @preview
 *
 * <div class="flex items-center space-x-2">
 *   <Checkbox id="terms" />
 *   <Label for="terms">Accept terms and conditions</Label>
 * </div>
 *
 * @usage
 *
 * ```astro
 * ---
 * import Label from '@bejamas/ui/components/Label.astro';
 * ---
 *
 * <Label for="terms">Accept terms and conditions</Label>
 * ```
 */

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

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

const baseClass =
  "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
---

<label class={cn(baseClass, className)} {...props}>
  <slot />
</label>

Usage

---
import Label from '@bejamas/ui/components/Label.astro';
---

<Label for="terms">Accept terms and conditions</Label>