Label

Labels identify form controls and improve accessibility by creating clickable target areas.

Import​

<script>
  import { Label } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Label for="email">Email Address</Label>

Props​

Prop	Type	Default	Description
for	string	-	ID of the associated input element
disabled	boolean	false	Applies disabled styling
class	string	-	Additional CSS classes

With Input​

Associate labels with inputs using matching for and id attributes:

<script>
  import { Label, Input } from '@classic-homes/theme-svelte';
</script>

<div class="space-y-2">
  <Label for="username">Username</Label>
  <Input id="username" placeholder="Enter username" />
</div>

Clicking the label will focus the associated input.

States​

Disabled​

When the associated input is disabled, apply matching styles to the label:

<div class="space-y-2">
  <Label for="disabled-input" disabled>Disabled Field</Label>
  <Input id="disabled-input" disabled value="Cannot edit" />
</div>

With Peer Styling​

Labels automatically style differently when their peer input is disabled:

<div class="grid gap-2">
  <Input id="peer-demo" disabled class="peer" />
  <Label for="peer-demo">This label fades when input is disabled</Label>
</div>

Required Indicator​

Add a required indicator with custom styling:

<Label for="required-field">
  Email <span class="text-destructive">*</span>
</Label>
<Input id="required-field" required />

Or with text:

<Label for="required-field">
  Email <span class="text-muted-foreground text-sm">(required)</span>
</Label>

With Help Text​

Combine labels with descriptive help text:

<div class="space-y-2">
  <Label for="password">Password</Label>
  <Input id="password" type="password" />
  <p class="text-sm text-muted-foreground">Must be at least 8 characters long.</p>
</div>

Accessibility​

The Label component:

• Uses the Bits UI Label primitive for proper accessibility
• Creates an accessible name for the associated input
• Clicking the label focuses the input
• Works with screen readers to announce the label

Visually Hidden Label​

For inputs where a visible label is not desired (like search), use screen-reader-only styling:

<Label for="search" class="sr-only">Search</Label>
<Input id="search" type="search" placeholder="Search..." />

Examples​

Form Field Group​

<div class="space-y-4">
  <div class="space-y-2">
    <Label for="first-name">First Name</Label>
    <Input id="first-name" />
  </div>
  <div class="space-y-2">
    <Label for="last-name">Last Name</Label>
    <Input id="last-name" />
  </div>
</div>

Horizontal Layout​

<div class="flex items-center gap-4">
  <Label for="inline-input" class="shrink-0 w-24">Name</Label>
  <Input id="inline-input" class="flex-1" />
</div>

With Checkbox​

<script>
  import { Label, Checkbox } from '@classic-homes/theme-svelte';
</script>

<div class="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label for="terms">I agree to the terms and conditions</Label>
</div>

Related Components​

• Input - Text input field
• Checkbox - Checkbox input
• FormField - Complete field with label and validation