Form

Field

Form field wrapper that adds label, description, and error message around any input control.

Loading playground

Overview

Field wraps a form control with a label, optional description, and error message. It provides consistent layout and accessibility (label-to-control association, error announcement) for inputs, selects, and custom controls.

Pass errorMessage and Field will derive invalid for you, so error styling stays in sync with the displayed message. Pass invalid explicitly only when you need the error state without a message.

Descendants pick up Field state (id, disabled, readonly, required, invalid, errorMessage) via context, so you can set disabled once on the Field instead of on every nested control.

Key Business & UX Benefits

Centralising label, description, and error association in one wrapper cuts the time to ship new forms and keeps accessibility audits clean across the whole product.
Auto-derived invalid state from errorMessage keeps validation visuals and announced text in sync, so customers see and hear the same problem and recover faster.
Setting disabled once on the Field instead of every child eliminates a common class of bugs where one nested control stays interactive during a submit.
Consistent error layout reduces visual noise on sign-up and checkout forms, which protects conversion when users hit a validation issue.

Pro-Tip from Larry: Pass errorMessage and let Field derive invalid for you; no need to bind both.

Usage

LField

<LField label="Label And Description" description="This is a default description.">
  <LInput placeholder="Input placeholder" />
</LField>

With Error Message

<LField label="Email" error-message="Please enter a valid email address">
  <LInput type="email" />
</LField>

Feature List

Wraps any control with consistent label-to-control association and error announcement, no per-control ARIA wiring needed
Auto-derives `invalid` from `errorMessage`, so validation visuals and announced text stay in sync
Publishes `id`, `disabled`, `readonly`, `required`, `invalid`, and `errorMessage` to descendants via context, so child controls inherit field state
Setting `disabled` once on the Field disables every nested control, removing a common bug where one input stays interactive during submit
Optional `description` prop adds helper copy with its own ARIA association, so screen readers announce help text alongside the label
Pass `invalid` explicitly without `errorMessage` for the error visual without a displayed message

API Reference

Prop	Default	Type
`label`		`string`
`description`		`string`
`descriptionIcon`		`string`
`required`	`false`	`boolean`
`disabled`	`false`	`boolean`
`readonly`	`false`	`boolean`
`invalid`	`false`	`boolean`
`errorMessage`		`string`
`forId`		`string`

Slot	Type
`default`	`any`

Edit this pageorReport an issue

Checkbox

Checkbox control for single-choice consent and multi-select groups, with tri-state support.

Input

Styled text field with optional icon or button addons and Field integration for labels and errors.