Label

A form label: 14px, weight 500, ink. Use it directly when you wire a control yourself; Field renders one for you.

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="you@company.com" />

Import

tsx

import { Label } from "@merid/react";

Examples

Required

required appends an * that is hidden from assistive tech. It is only a visual cue — set required on the control too so it is announced and validated.

Full name

<Label htmlFor="name" required>Full name</Label>
<Input id="name" required />

Disabled

disabled dims the label to match a disabled control. It does not disable anything by itself.

Workspace

<Label htmlFor="workspace" disabled>Workspace</Label>
<Input id="workspace" defaultValue="acme" disabled />

API reference

Label forwards its ref to the <label> and passes other label attributes (htmlFor, id, …) through.

Prop	Type	Default	Description
`required`	`boolean`	`false`	Appends a visual * marker, hidden from assistive tech.
`disabled`	`boolean`	`false`	Dims the label to match a disabled control.
`htmlFor`	`string`	–	id of the control the label names.

Styling

Hook	Values
`.mrd-label`	Root <label>
`.mrd-label__required`	The required marker
`data-disabled`	Present when `disabled`

Accessibility

Always connect the label with htmlFor matching the control's id; clicking the label then focuses the control and it becomes its accessible name.
The * is aria-hidden; “required” is announced from the control's own required attribute.

Guidelines

Keep labels short nouns — “Email”, “Company name” — and always visible.

Avoid

Rely on the placeholder as the only label.

Field — label, control, description and error wired together.
Input, Textarea, NativeSelect.