Label

Renders an accessible label associated with form controls.

Default

With Input

The for attribute links the label to an input by its id. Clicking the label will focus the associated input.

With Input

Username

With Textarea

Labels work with any form control.

With Textarea

Message

With Checkbox

For checkboxes, place the label after the input and use inline layout.

With Checkbox

Accept terms and conditions

Required Field

Add a visual indicator for required fields.

Required

Email *

    <div class="space-y-2">
  <.label for="email">
    Email <span class="text-destructive">*</span>
  </.label>
  <.input type="email" id="email" name="email" required />
</div>
  

With Hint Text

Combine labels with hint text for additional context.

With Hint

Password

Must be at least 8 characters long.

    <div class="space-y-2">
  <.label for="password">Password</.label>
  <.input type="password" id="password" name="password" />
  <p class="text-sm text-muted">Must be at least 8 characters.</p>
</div>
  

Disabled State

Style labels for disabled inputs differently.

Disabled

Disabled field

Form Example

A complete form example using labels.

Form

    <form class="space-y-4">
  <div class="space-y-2">
    <.label for="name">Full name</.label>
    <.input type="text" id="name" name="name" />
  </div>
  <div class="space-y-2">
    <.label for="email">Email</.label>
    <.input type="email" id="email" name="email" />
  </div>
  <div class="flex items-center gap-2">
    <.checkbox id="newsletter" name="newsletter" />
    <.label for="newsletter">Subscribe</.label>
  </div>
</form>
  