Forms

Label

Accessible form label. Wraps Radix Label primitive with tokenised typography.

Preview

import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';

/** Label paired with an input, clicking the label focuses the field. */
export default function LabelDefaultDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="email-demo">Email address</Label>
      <Input id="email-demo" type="email" placeholder="you@example.com" />
    </div>
  );
}

01 Installation

Install

Pull Label from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Label } from "@brika/clay";

tsxGranular1 line

import { Label } from "@brika/clay/components/label";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxLabel.tsx12 lines

import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';

/** Label paired with an input, clicking the label focuses the field. */
export default function LabelDefaultDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="email-demo">Email address</Label>
      <Input id="email-demo" type="email" placeholder="you@example.com" />
    </div>
  );
}

03 Examples

Label, every way

Disabled

Label on a disabled field, inherits reduced opacity via the peer-disabled class.

GitHub

import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';

/** Label on a disabled field, inherits reduced opacity via the peer-disabled class. */
export default function LabelDisabledDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="api-key-demo" className="peer">API key</Label>
      <Input id="api-key-demo" disabled defaultValue="sk-live-••••••••" />
    </div>
  );
}

Required

Required field, add an asterisk inside a span to signal mandatory status.

GitHub

import { Input } from '@brika/clay/components/input';
import { Label } from '@brika/clay/components/label';

/** Required field, add an asterisk inside a span to signal mandatory status. */
export default function LabelRequiredDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <Label htmlFor="username-demo">
        Username <span className="text-destructive" aria-hidden="true">*</span>
      </Label>
      <Input id="username-demo" placeholder="brika_user" required />
    </div>
  );
}

04 Accessibility

Accessibility

Renders a <label> element, clicking it focuses the associated input.
Always link to the input via htmlFor matching the input's id.
Required-field indicators (* or "required") should be inside the label or referenced via aria-describedby.
Disabled labels inherit opacity-50 visually; no ARIA change is needed.

05 API reference

API reference

Props specific to Label. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

No wrapper-specific props, all attributes pass through to the underlying primitive.