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>
  );
}

<script setup lang="ts">
import { Label } from "@/components/starwind/label";
import { Input } from "@/components/starwind/input";
</script>

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

<script lang="ts">
  import { Input } from "@/components/starwind/input";
  import { Label } from "@/components/starwind/label";
</script>

<div class="w-[400px] max-w-full">
  <div class="space-y-2">
    <Label for="docs-label-demo-input">Email</Label>
    <Input id="docs-label-demo-input" type="email" placeholder="Enter your email" />
  </div>
</div>

Installation

pnpx starwind@latest add label --framework astro

npx starwind@latest add label --framework astro

yarn dlx starwind@latest add label --framework astro

pnpx starwind@latest add label --framework react

npx starwind@latest add label --framework react

yarn dlx starwind@latest add label --framework react

pnpx starwind@latest add label --framework vue

npx starwind@latest add label --framework vue

yarn dlx starwind@latest add label --framework vue

pnpx starwind@latest add label --framework svelte

npx starwind@latest add label --framework svelte

yarn dlx starwind@latest add label --framework svelte

Usage

---
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>
  );
}

<script setup lang="ts">
import { Label } from "@/components/starwind/label";
import { Input } from "@/components/starwind/input";
</script>

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

<script lang="ts">
  import { Label } from "@/components/starwind/label";
  import { Input } from "@/components/starwind/input";
</script>

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

Sizes

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>

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

export function Example() {
  return (
    <>
      <div className="space-y-2">
        <Label size="sm" htmlFor="small-input">Small Label</Label>
        <Input id="small-input" size="sm" placeholder="Small input" />
      </div>

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

      <div className="space-y-2">
        <Label size="lg" htmlFor="large-input">Large Label</Label>
        <Input id="large-input" size="lg" placeholder="Large input" />
      </div>
    </>
  );
}

<script setup lang="ts">
import { Label } from "@/components/starwind/label";
import { Input } from "@/components/starwind/input";
</script>

<template>
  <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>
</template>

<script lang="ts">
  import { Label } from "@/components/starwind/label";
  import { Input } from "@/components/starwind/input";
</script>

<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>

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

export function Example() {
  return (
    <>
      <div className="space-y-2">
        <Label htmlFor="disabled-input">Disabled Input Label</Label>
        <Input id="disabled-input" disabled placeholder="This input is disabled" />
      </div>
    </>
  );
}

<script setup lang="ts">
import { Label } from "@/components/starwind/label";
import { Input } from "@/components/starwind/input";
</script>

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

<script lang="ts">
  import { Label } from "@/components/starwind/label";
  import { Input } from "@/components/starwind/input";
</script>

<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 styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. 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

View version history v1.3.1 5 releases

v1.3.1

In Astro, an attribute that you set on Label now wins over the component’s own default for the same attribute, such as role or aria-label.

v1.3.0

The component is now available for React as well as Astro. Its props and styles stay the same.

v1.2.2

The Tailwind variants now live in their own variants.ts file in the component folder.

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.