Label

Your email address

Installation

npx bearnie add label

Usage

import { Label } from "@/components/bearnie/label"

<Label for="email">Email</Label>

Examples

With input

<div class="grid gap-2 w-full max-w-sm">
  <Label for="email">Email</Label>
  <Input type="email" id="email" placeholder="m@example.com" />
</div>

With checkbox

Accept terms and conditions

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

Required

Name*

<div class="grid gap-2 w-full max-w-sm">
  <Label for="name" required>Name</Label>
  <Input id="name" placeholder="Enter your name" required />
</div>

Anatomy

Label - A single label element

Props

Prop	Type	Default	Description
for	string	-	ID of the associated form element
required	boolean	false	Shows required indicator (*)
class	string	-	Additional CSS classes