Label

Usage

import { Label } from '@raystack/apsara/v1'
 
<Label size="small">Small Label</Label>
<Label size="medium" required>Required Label</Label>
<Label size="large">Large Label</Label>

Label Props

Examples

Size

Labels have 3 different sizes.

<Flex gap="large" align="center">
  <Label size="small">Small Label</Label>
  <Label size="medium">Medium Label</Label>
  <Label size="large">Large Label</Label>
</Flex>

Required

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

<Flex gap="large" align="center">
  <Label size="medium" required>
    Required Field
  </Label>
  <Label size="medium" required requiredIndicator=" (Required)">
    Required Field
  </Label>
</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