Logoapsara
DocumentationExamples
LabelA text label component that provides names for form controls.
Radix UIAPI Reference
Preview
Installation
Install the component from your command line. 
npm install @raystack/apsara
Anatomy
Import all parts and piece them together. 
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>
API Reference
Props
The Label component accepts the following props:
  • size: "small" | "medium" | "large" - Controls the size of the label (default: "small")
  • required: boolean - When true, shows a required field indicator
  • requiredIndicator: string - Customizes the required field indicator (default: "*")
  • htmlFor: string - Associates the label with a form control using its ID
  • className: string - Additional CSS class names
Required
Labels can indicate required fields with either a default asterisk or custom text.
loading...
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