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>

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

export function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="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

Framework Availability

Astro Available React Available

Label is available for Astro and React.

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

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Label

Inherits label attributes.

Contains the following additional props:

Prop Type Default

size "sm" | "md" | "lg" "md"

Description: Selects the component's visual size.
Classification: Styled variant

Changelog

v1.3.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v1.2.2

Refactor tailwind variants functions into separate variants.ts file

v1.2.0

Add data-slot attribute to enable global styling updates

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.