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 labelnpx starwind@latest add labelyarn dlx starwind@latest add labelUsage
size
---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
---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.2.0
- Add
data-slotattribute to enable global styling updates
v1.1.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.