Label

A form label that pairs with inputs, checkboxes, and switches for accessible field naming.

When to use

• Every form field — Input, Textarea, Checkbox, Switch should have a Label.
• Required field indicator — pass required to show a red asterisk.

When NOT to use

• For standalone text or headings — use Text or a heading element.

Import

import { Label } from '@mihcm/ui/Label';

Basic usage

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

Link the label to its input via htmlFor / id so clicks on the label focus the input.

Tones

Required indicator

<Label htmlFor="name" required>Full name</Label>

Shows a red asterisk after the label text. This is a visual cue only — always set aria-required on the input itself.

Composition

• Always pair with a form control via htmlFor matching the control's id.
• Use tone="destructive" to visually highlight error labels.
• required adds a red asterisk — purely visual. Set aria-required on the input for semantics.
• For helper text below the field, use <Text size="sm" tone="muted"> instead of Label.

Related

• Input — text input field.
• Checkbox — boolean field.
• Switch — on/off toggle.
• Form — auto-wires labels to controls via FormField.