On this page

Label

---
import { Label } from "@/components/starwind/label";
import { Input } from "@/components/starwind/input";
---

<div class="space-y-2">
  <Label for="demo-input">Email</Label>
  <Input id="demo-input" type="email" placeholder="Enter your email" />
</div>

Installation

pnpx starwind@latest add label

npx starwind@latest add label

yarn dlx starwind@latest add label

Usage

size

Small Label

Medium Label

Large Label

---
import { Label } from "@/components/starwind/label";
import { Input } from "@/components/starwind/input";
---

<div class="space-y-2">
  <Label size="sm" for="small-input">Small Label</Label>
  <Input id="small-input" size="sm" placeholder="Small input" />
</div>

<div class="space-y-2">
  <Label size="md" for="medium-input">Medium Label</Label>
  <Input id="medium-input" size="md" placeholder="Medium input" />
</div>

<div class="space-y-2">
  <Label size="lg" for="large-input">Large Label</Label>
  <Input id="large-input" size="lg" placeholder="Large input" />
</div>

disabled state

Disabled Input Label

---
import { Label } from "@/components/starwind/label";
import { Input } from "@/components/starwind/input";
---

<div class="space-y-2">
  <Label for="disabled-input">Disabled Input Label</Label>
  <Input id="disabled-input" disabled placeholder="This input is disabled" />
</div>

API Reference

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`

The component also accepts all standard HTML attributes for the <label> element.

Changelog

v1.1.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.