Component

Field

Group a label, form control, supporting copy, and validation message without hiding their native semantics.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Field } from "@chitrank2050/monoline-ui/field"

Basic usage

<Field invalid>
  <Label htmlFor="email">Email</Label>
  <Input id="email" aria-invalid="true" aria-describedby="email-error" />
  <Field.Error id="email-error">Enter a valid email address.</Field.Error>
</Field>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Field keeps a label, control, supporting description, and validation message together as one form unit.

Avoid when

The content is not a form control or the layout would hide a required label and error relationship.

Accessibility

Field preserves native child semantics. Connect Label with htmlFor, then wire Field.Description and Field.Error IDs through aria-describedby and expose invalid state on the control.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

invalidbooleanMarks the field group as invalid

disabledbooleanDims a disabled field group

Field.Descriptioncompound slotSupporting text for the control

Field.Errorcompound slotLive validation feedback with alert semantics

Design tokens

Theme variables this component reads for color, spacing, and motion.

--text-mutedCSS varDescription text

--destructiveCSS varValidation text

--font-monoCSS varValidation label typography

Implementation

The source used by the example above, including any state it needs.

<Field invalid>
  <Label htmlFor="email">Email</Label>
  <Input id="email" aria-invalid="true" aria-describedby="email-error" />
  <Field.Error id="email-error">Enter a valid email address.</Field.Error>
</Field>

Compare related components or review the package and theme setup.

01ComponentLabelComponent · ReferenceReference→02ComponentInputComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview