Label

The Label component provides proper form field labeling with accessibility features, required indicators, and consistent typography for form elements.

Basic Usage

Preview

Username

Code

---
import Label from '@uicg/cli/components/Label/label.astro'
import Input from '@uicg/cli/components/Input/input.astro'
---

<Label for="basic-input">Username</Label>
<Input id="basic-input" placeholder="Enter your username" />

Required Fields

Preview

Email Address *

Code

<Label for="required-input" required>Email Address</Label>
<Input id="required-input" type="email" placeholder="Enter your email" required />

Optional Fields

Preview

Middle Name (optional)

Code

<Label for="optional-input" optional>Middle Name</Label>
<Input id="optional-input" placeholder="Enter your middle name" />

With Description

Preview

Username

*

Choose a unique username that will be visible to other users

Code

<Label
  for="description-input"
  required
  description="Choose a unique username that will be visible to other users"
>
  Username
</Label>
<Input id="description-input" placeholder="Enter your username" />

Error State

Preview

Username

*

This username is already taken

Code

<Label
  for="error-input"
  required
  error="This username is already taken"
>
  Username
</Label>
<Input id="error-input" placeholder="Enter your username" intent="danger" />

Sizes

Preview

Small Label

Medium Label

Large Label

Code

<!-- Small -->
<Label size="small" for="small-input">Small Label</Label>
<Input id="small-input" size="small" placeholder="Small input" />

<!-- Medium (default) -->
<Label size="medium" for="medium-input">Medium Label</Label>
<Input id="medium-input" size="medium" placeholder="Medium input" />

<!-- Large -->
<Label size="large" for="large-input">Large Label</Label>
<Input id="large-input" size="large" placeholder="Large input" />

Font Weights

Preview

Normal Weight

Medium Weight

Semibold Weight

Bold Weight

Code

<Label weight="normal" for="normal-input">Normal Weight</Label>
<Label weight="medium" for="medium-input">Medium Weight</Label>
<Label weight="semibold" for="semibold-input">Semibold Weight</Label>
<Label weight="bold" for="bold-input">Bold Weight</Label>

Intent Variants

Preview

Default Intent

Muted Intent

Success Intent

Error Intent

Code

<Label intent="default" for="default-intent">Default Intent</Label>
<Label intent="muted" for="muted-intent">Muted Intent</Label>
<Label intent="success" for="success-intent">Success Intent</Label>
<Label intent="error" for="error-intent">Error Intent</Label>

Accessibility

The Label component follows WCAG 2.1 AA guidelines:

• ✅ Proper Association: Uses for attribute to associate with form controls
• ✅ Required Indicators: Clear visual and screen reader indication of required fields
• ✅ Error Messages: Properly associated error messages with aria-describedby
• ✅ Screen Reader Support: Error messages announced with role="alert" and aria-live="polite"
• ✅ Semantic Markup: Uses native <label> element for maximum compatibility
• ✅ Focus Management: Labels enhance focus behavior of associated inputs

Properties

Property	Type	Default	Description
for	string	undefined	ID of the form control this label is associated with
required	boolean	false	Shows a red asterisk (*) to indicate required field
optional	boolean	false	Shows “(optional)” text for optional fields
description	string	undefined	Helper text displayed below the label
error	string	undefined	Error message displayed below the label
size	"small" | "medium" | "large"	"medium"	Size of the label text
weight	"normal" | "medium" | "semibold" | "bold"	"medium"	Font weight of the label
intent	"default" | "muted" | "error" | "success"	"default"	Visual style variant
class	string	undefined	Additional CSS classes

Features

Form Association

The Label component automatically associates with form controls using the for attribute, improving accessibility and user experience.

Required Field Indicators

When required={true} is set, a red asterisk (*) is displayed and announced to screen readers as “required”.

Optional Field Indicators

When optional={true} is set, “(optional)” text is displayed to clarify that the field is not required.

Error Integration

Error messages are properly associated with the label using aria-describedby and announced to screen readers with appropriate ARIA attributes.

Description Support

Helper text can be provided to give users additional context about what to enter in the associated form field.

Examples

Complete Form Field

---
import Label from '@uicg/cli/components/Label/label.astro'
import Input from '@uicg/cli/components/Input/input.astro'
---

<div class="space-y-2">
  <Label
    for="email-field"
    required
    description="We'll never share your email with anyone else"
  >
    Email Address
  </Label>
  <Input
    id="email-field"
    type="email"
    placeholder="Enter your email"
    required
  />
</div>

Form with Validation

---
import Label from '@uicg/cli/components/Label/label.astro'
import Input from '@uicg/cli/components/Input/input.astro'
---

<form>
  <div class="space-y-4">
    <div>
      <Label
        for="username"
        required
        error={errors.username}
        description="Must be 3-20 characters long"
      >
        Username
      </Label>
      <Input
        id="username"
        name="username"
        intent={errors.username ? 'danger' : 'default'}
        required
      />
    </div>

    <div>
      <Label for="bio" optional>Biography</Label>
      <Textarea id="bio" name="bio" rows={4} />
    </div>
  </div>
</form>