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

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

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