Label

A text label component that provides names for form controls.

Anatomy

Import and assemble the component:

1import { Label } from '@raystack/apsara'
2

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

API Reference

Renders a text label for form elements. Outside of a Field, use Label to attach a label to a control via htmlFor. Inside a Field, prefer Field.Label so the label is wired up to the field automatically.

Label is layout-neutral — compose it with Flex (or wrap a control as a child) to lay out the label and its control.

Prop

Type

Examples

Inline with a control

Use Flex to place a label next to a Radio or Checkbox.

1<Flex gap="small" align="center">
2  <Checkbox id="terms" />
3  <Label htmlFor="terms">Accept terms</Label>
4</Flex>

Optional indicator

Pass required={false} to display an (optional) indicator next to the label. Override the text via optionalText.

1<Flex direction="column" gap="small">
2  <Label>Required field</Label>
3  <Label required={false}>Optional field</Label>
4  <Label required={false} optionalText="— not required">
5    Custom optional text
6  </Label>
7</Flex>

Accessibility

  • Renders a semantic HTML <label> element by default
  • Supports programmatic association with form controls via htmlFor
  • Maintains WCAG compliant color contrast ratios
  • Shows a pointer cursor when associated with a control via htmlFor