DhLabel

Label / caption text — the Material 3 label tier (lg / md / sm). Semantic <span> by default; as="label" wires it to an input.

Sizes

The three Material 3 label tiers. Each maps to the `--font-size-label-<size>` / `--line-height-label-<size>` / `--font-letter-spacing-label-<size>` tokens at medium weight (500).

label-lg Large label

label-md Medium label

label-sm Small caption

<DhLabel size="lg">Large label</DhLabel>
<DhLabel size="md">Medium label</DhLabel>
<DhLabel size="sm">Small caption</DhLabel>

Input labels

Prefer the native `<label>` element for form fields: `as="label"` renders one, and `for` wires it to the input.

<DhLabel as="label" for="email" size="lg">Email</DhLabel>
<input id="email" type="email" />

Uppercase

For overline-style labels. The casing is applied with CSS, so write the text naturally — the DOM keeps your string, which is what screen readers announce and what translations receive. Typing the caps yourself gets neither.

Category · 3 items Last updated

<DhLabel uppercase>Category · 3 items</DhLabel>
<DhLabel uppercase size="sm">Last updated</DhLabel>

Centred

`center` renders the label as a block and centres the text — a plain inline span has no width to centre within, so the prop handles both. Combines with `uppercase`.

Centred caption Step 2 of 4

<DhLabel center>Centred caption</DhLabel>
<DhLabel center uppercase size="sm">Step 2 of 4</DhLabel>

Other elements

`as` picks the rendered element without changing the styling — use whichever tag is semantically right.

A paragraph that reads as a caption

Fine print with label styling

<DhLabel as="p">A paragraph that reads as a caption</DhLabel>
<DhLabel as="small">Fine print with label styling</DhLabel>