Label

Form field label with proper accessibility associations. Built on Radix UI Label primitive.

Installation
# Install @opencosmos/ui to use Label
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— ID of the associated form control
Usage
Import
import { Label } from '@opencosmos/ui';
Example
<Label>
  Content
</Label>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
htmlFortext""ID of the associated form control

Accessibility

  • Built on Radix UI Label primitive for proper semantics
  • Creates accessible association with form controls via htmlFor
  • Automatically handles click events to focus associated control
  • Supports peer-disabled state styling
  • Properly announces to screen readers
  • Essential for WCAG 2.1 Level AA compliance

Examples

With Input
With Textarea
With Checkbox

Code Examples

Basic Usage

Label paired with input field

import { Label, Input } from "@opencosmos/ui"

<div className="grid w-full items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

With Checkbox

Label with checkbox for agreement

import { Label, Checkbox } from "@opencosmos/ui"

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

With Required Field

Label with required field indicator

import { Label, Input } from "@opencosmos/ui"

<div className="grid w-full items-center gap-1.5">
  <Label htmlFor="username">
    Username <span className="text-destructive">*</span>
  </Label>
  <Input type="text" id="username" placeholder="Username" required />
</div>