Label

Accessible label component for form controls with consistent styling

Installation

pnpm add @wandercom/design-system-web

Usage

import { Label } from '@wandercom/design-system-web/ui/label';

export function Example() {
  return <Label htmlFor="email">Email address</Label>;
}

Examples

Loading example...

Props

htmlFor?:

string
ID of the form control this label is associated with.

className?:

string
Additional CSS classes to apply.

children:

React.ReactNode
The label text or content.

Accessibility

The Label component is built on Radix UI Label primitive and includes proper accessibility features out of the box. It automatically associates with form controls when using the htmlFor prop, enabling screen readers to announce the label when the control receives focus.

Label