Label

Installation

pnpm dlx saastro add label

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add label --yes

pnpm add tailwind-variants

Usage

---
import { Label } from "@/components/ui-saastro/label"
---

<Label for="email">Your email address</Label>

Examples

With Input

---
import { Input } from "@/components/ui-saastro/input"
import { Label } from "@/components/ui-saastro/label"
---

<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

With Checkbox

---
import { Checkbox } from "@/components/ui-saastro/checkbox"
import { Label } from "@/components/ui-saastro/label"
---

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

Props

Accessibility

• Uses native <label> element for built-in accessibility
• Clicking the label focuses/activates the associated control
• Properly associates with form controls via the for attribute
• Inherits disabled state styling from peer elements