Field

Connect a label, control, guidance, and validation message.

Live example

A reviewed public example, isolated from this page.

import { Field } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

control<input>
Native input by default; render may resolve to a native textarea or select. Root authority supplies id/name/disabled/required while consumer IDREFs are merged with every Field.Description and active matching Field.Error id in initial server markup and after hydration.
Uses native semantics
description<p>
Descriptive content with an instance-unique deterministic id that Control appends to consumer-supplied aria-describedby ids.
Uses native semantics
error<p>
Matched native or controlled error content with an instance-unique deterministic id. Only active matching errors enter Control IDREFs. It has no alert role on initial render; a newly-invalid or native-invalid transition receives a one-commit role=alert announcement.
Uses native semantics
label<label>
Native label associated to Root's deterministic control id, with the same double-click text-selection guard as standalone Label.
Uses native semantics
root<div>
Single-control field context. Prepares direct part identities and relationships for server markup, then mirrors the native control's validity/value/focus lifecycle into render state and data hooks; dirty/touched/invalid may be controlled externally.
Uses native semantics