ABBA UIv0.1.0
Typography

Label

A caption for a form control.

Server-renderable1 export

Renders a real `<label>`, so clicking it focuses the associated control through the platform rather than through a click handler. FormField renders this for you.

Import

import { Label } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/label.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Required field

The asterisk is decorative; the word is what gets announced.

<Stack gap={2}>
  <Label htmlFor="email" required>Email address</Label>
  <Input id="email" type="email" />
</Stack>

Props

Label props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
htmlForstringId of the control this labels.
requiredbooleanfalseMarks the associated control as required.
requiredLabelstring"required"Text announced in place of the asterisk.
disabledbooleanfalseDims the label to match a disabled control.

Accessibility

  • The asterisk is `aria-hidden`; a visually-hidden “required” is announced instead.
  • Always pair with `htmlFor` — a label with no association is decoration.