Label

Renders an accessible label associated with form controls.

Basic Usage

Basic label

Username

Required field

Email *

With icon

Password

With checkbox

Accept terms and conditions

Disabled state

Disabled field

LabelForm labels with various states

Installation

pnpm add @corew500/ui

Usage

import { Label } from "@mordecai-design-system/ui"

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

Examples

Basic

<div className="space-y-2">
  <Label htmlFor="name">Name</Label>
  <Input id="name" placeholder="Enter your name" />
</div>

With Required Indicator

<div className="space-y-2">
  <Label htmlFor="email">
    Email <span className="text-destructive">*</span>
  </Label>
  <Input id="email" type="email" required />
</div>

With Checkbox

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Disabled State

<div className="space-y-2 group" data-disabled="true">
  <Label htmlFor="disabled">Disabled field</Label>
  <Input id="disabled" disabled />
</div>

With Icon

<Label htmlFor="search">
  <SearchIcon className="size-4" />
  Search
</Label>

Props

No props documentation found for Label. Run pnpm generate:props to generate.

Accessibility

Labels are automatically associated with inputs via the htmlFor prop
When used with disabled inputs (via peer classes), labels reduce opacity
Labels support both explicit (htmlFor) and implicit (wrapping) association