Passer au contenu principal

Label

Implemented

Form control label with htmlFor binding and optional required marker (asterisk, aria-hidden, semantic-error color).

Categoryatoms
Sourcesrc/components/atoms/Label/Label.tsx
AI HintAlways pair with a form control id. Compose inside FormField rather than standalone where possible.

Form control label atom with htmlFor binding.

Label

design-system

Label component preview and API reference.

Props

Preview

Label

Prop
Type
Required
Default
Description
htmlFor
string
Required
—

id of the associated form control

required
boolean
Optional
false

Show the required asterisk marker

Quick use:<Label />

Accessibility

ARIA rolelabel

ARIA

1 rule

WCAG 3.3.2

htmlFor must reference an existing control id (label association)

Usage

Import

tsxSnippet
import { Label } from "@epasslive/design-system"

Example 1

tsxSnippet
<Label htmlFor="email">Email</Label>

Example 2

tsxSnippet
<Label htmlFor="email" required>Email</Label>

Anti-patterns

— Never omit htmlFor — an unassociated label fails screen readers

Design System v4.1.0 | ePassLive