Label

A text label component that provides names for form controls.

Usage

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

Label Props

Prop

Type

Examples

Size

Labels have 3 different sizes.

1<Flex gap="large" align="center">
2  <Label size="small">Small Label</Label>
3  <Label size="medium">Medium Label</Label>
4  <Label size="large">Large Label</Label>
5</Flex>

Required

Labels can indicate required fields with either a default asterisk or custom text.

1<Flex gap="large" align="center">
2  <Label size="medium" required>
3    Required Field
4  </Label>
5  <Label size="medium" required requiredIndicator=" (Required)">
6    Required Field
7  </Label>
8</Flex>

Accessibility

The Label component is designed with accessibility in mind:

  • Uses semantic HTML <label> element
  • Supports programmatic association with form controls via htmlFor
  • Required indicators are properly hidden from screen readers
  • Maintains WCAG compliant color contrast ratios
  • Supports keyboard navigation when used with form controls