Label

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Label } from "@tessinaui/ui";

<Label htmlFor="email">Email address</Label>
<input id="email" type="email" />

Examples

Default

A basic label associated with a control via htmlFor.

Sizes

Five size scales — xs, sm, md, lg, and xl — matching Button and Field sizing.

Intents

Use intent to communicate validation state — error, warning, success, and info.

Required and optional

Mark fields with required or optional indicators after the label text.

With icon

Add a leadingIcon (or trailingIcon) beside the label text.

With description

Provide helper text below the label via the description prop.

Sizes

Matches Button / Field sizing so labels line up with adjacent inputs.

Intents

Use intent to communicate validation state. Any non-none intent overrides the tone.

Tones

Controls the base colour when intent="none".

Required and optional indicators

<Label required>Full name</Label>
<Label optional>Middle name</Label>

Pass requiredIndicator or optionalIndicator to override the default markers (* and (optional)). Indicators are flagged aria-hidden — pair the label with an aria-required or required attribute on the associated control so screen readers announce the state.

<Label htmlFor="pwd" required>Password</Label>
<input id="pwd" type="password" required aria-required="true" />

Icons and description

<Label leadingIcon={<Mail />} description="We'll never share your email.">
  Email address
</Label>

The description renders below the label text and inherits the disabled state.

Disabled

<Label disabled>Unavailable option</Label>

disabled visually mutes the label (including any required/optional indicators). Use it when the associated control is disabled — the attribute does NOT disable the underlying input itself.

RTL

Pass dir="rtl" to flip icon and indicator alignment via logical spacing (ms-*).

<Label dir="rtl" required leadingIcon={<Mail />}>
  البريد الإلكتروني
</Label>

Accessibility

• Renders a native <label> element — clicking the label focuses the control referenced by htmlFor.
• Required and optional indicators are aria-hidden="true". Communicate required state on the associated input itself via required / aria-required.
• Keep label text concise and always visible; avoid placeholder-only labels.
• When the label describes a group of controls (checkbox group, radio group), prefer a <legend> inside a <fieldset> rather than a standalone Label.

API Reference

Label

The component extends all standard <label> HTML attributes.