Field

<Fieldlabel="Project name"description="Lowercase letters, numbers and dashes."><Input placeholder="my-worker" /></Field>

Field is the label, the description, the error and the wiring between them. Every input-like component in heyo-ui composes it, which is why a label looks and behaves identically whether it sits above an Input, a Select or a NumberField.

Most of the time you never render it: Input, Textarea, NumberField and OtpField take label, description and error directly and build the field for you. Reach for Field when the control inside is your own, or when it is one heyo-ui does not wrap — a Select, a Slider, a group of checkboxes.

Usage

import { Field, Select } from "@heyo-sh/heyo-ui";<Field label="Region" description="Where the worker runs.">  <Select>…</Select></Field>;

Errors

error takes a ready-made message, or a rule tied to the browser's own ValidityState. A truthy error also flips the control into its invalid state, and the description steps aside while the message is up — two lines of competing text under one input is one too many.

<Field label="Email" error="Enter a valid email address."><Input defaultValue="not-an-email" /></Field><Fieldlabel="Password"description="At least 8 characters."error={{ message: "At least 8 characters", match: "tooShort" }}><Input type="password" minLength={8} /></Field>

Optional, not required

optional adds a muted marker to the label — the inverse of shouting with an asterisk. In a form where most fields are required, marking the two that are not is quieter and more useful than marking the eight that are.

<Field label="Description" optional><Input placeholder="What does this worker do?" /></Field>

The label row

labelAside fills the right end of the label row — a character counter, a "Forgot password?" link, a hint about the format.

<Field label="Password" labelAside={<a href="/reset">Forgot password?</a>}><Input type="password" /></Field>

Properties

FieldDescription and FieldErrorMessage

The two message slots, exported for bespoke layouts — a description beside the control rather than under it, say.

import { FieldDescription, FieldErrorMessage } from "@heyo-sh/heyo-ui";

FieldPrimitive

The raw Base UI primitives (FieldPrimitive.Root, .Label, .Control, .Description, .Error), re-exported as an escape hatch for a layout the shell cannot express.