Field
fieldComposes labels, controls, help text, validation messages, and required state.
Usage
Basic usage
label string Field.Label, children is the control (Input / Textarea).
<Field label="Email">
<Input placeholder="you@work.com" />
</Field>Help instructions
description renders muted small characters and automatically strings aria-describedby.
We will not publish your email address
<Field label="Email" description="We will not publish your email">
<Input placeholder="you@work.com" />
</Field>Error status
If error is not empty, it implies invalid (marked red + shows error), and there is no need to pass invalid separately.
<Field label="Email" error="The email format is incorrect">
<Input defaultValue="not-an-email" />
</Field>Disabled
disabled is passed to Field.Root, which disables the control.
<Field label="Email" disabled>
<Input placeholder="you@work.com" />
</Field>When to use
Use Field to associate one control, such as Input or Textarea, with a label, supporting description, and validation error. Field wires those elements together with aria-describedby and aria-invalid. Form and ProForm use it internally; it is also suitable for custom form rows and controls inside StepsForm.
Import
import { Field } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| invalid | boolean | false | Explicit invalid state; a nonempty error also marks the field invalid. |
| disabled | boolean | false | Disables the field. |
| name | string | — | Field name forwarded to the underlying Field.Root. |
| colSpan | "full" | — | Spans the full row in a ProForm column grid; has no effect outside that grid. |
| className | string | — | Additional class name for the vertical Field.Root container. |
Slots
| Slot | Type | Description |
|---|---|---|
| children* | ReactNode | Field control, such as HulianUI Input or Textarea. |
| label | ReactNode | Visible field label. |
| description | ReactNode | Help text. |
| error | ReactNode | Validation message. Any nonempty value marks the field invalid and renders the error. |
Usage guidelines
- A non-empty
erroralready impliesinvalid; do not pass both. Passinvalidalone only when the control needs invalid styling without an error message. - Field uses Base UI Field and renders externally controlled errors with
match={true}. Keep the error inside Field so it remains part of the generatedaria-describedbyrelationship; a separate<p>will not be connected automatically. See [[base-ui-field-error-match-true-for-external-controlled-error]]. - For a Textarea child, follow the render-as typing guidance in [[base-ui-field-control-render-textarea-type-safe]].
Related
Form · ModalForm / DrawerForm · ProForm · StepsForm · LoginForm · SearchForm
Playground
We will not publish your email address
<Field label="Email" description="We will not publish your email address">
<Input placeholder="you@work.com" />
</Field>