Label

<Label htmlFor="token">API token</Label><Input id="token" placeholder="heyo_live_…" />

Label renders a <label> at 13px medium — the weight the system uses to name a surface or a group. Inside a Field it wires htmlFor automatically; standalone you pass htmlFor yourself.

You rarely render it directly. Input, Textarea, NumberField and OtpField take a label prop and build the whole field, including this.

Usage

import { Label } from "@heyo-sh/heyo-ui";<Label htmlFor="token">API token</Label>;

Optional and aside

<Label htmlFor="notes" optional>Notes</Label><Label htmlFor="key" aside={<span className="text-heyo-subtle">32 characters</span>}>Signing key</Label>

optional is the inverse of marking everything required with an asterisk: in a form where most fields are required, the exceptions are the information worth carrying.

Labelling something that is not a field

render swaps the element while keeping the typography — useful for a group heading that labels several controls at once.

<Label render={<legend />}>Permissions</Label>

Properties