Form Patterns

Field

A composable form field system that links labels, hints, and error messages to inputs through shared context. Handles accessibility attributes automatically.

Sourcesrc/components/ui/field.tsx

Display name

This is how others will see you.

Import

import {
  Field,
  FieldLabel,
  FieldHint,
  FieldError,
} from "@mikenotthepope/substrateui"

Composition

Field
├── FieldLabel
├── FieldHint
└── FieldError

Error State

Email address

Please enter a valid email address.

Complete Example

Accessibility

Field automatically links FieldLabel to the input via htmlFor, and connects FieldHint and FieldError via aria-describedby, so screen reader users hear the label, the hint, and any validation error as a single unit.

FieldError uses role="alert" so screen readers announce validation errors the moment they appear, without the user needing to navigate back to the field.

Always include a FieldLabel. Placeholder text is not a substitute for a label — it disappears when users start typing and is often low-contrast.

API Reference

Field

Prop	Type	Default	Description
`error`	`boolean`	`false`	When true, applies error styling to child inputs and labels. Adds red border to inputs and red text to labels.
`id`	`string`	`auto-generated`	Explicit ID for the field. When omitted, a unique ID is generated automatically via React.useId().
`className`	`string`	—	Additional CSS classes to apply to the field wrapper.

FieldLabel

Prop	Type	Default	Description
`children` required	`React.ReactNode`	—	The label text content.
`className`	`string`	—	Additional CSS classes to apply to the label element.

FieldHint

Prop	Type	Default	Description
`children` required	`React.ReactNode`	—	Helper text displayed below the input.
`className`	`string`	—	Additional CSS classes to apply to the hint paragraph.

FieldError

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The error message. When empty or undefined, the element does not render at all.
`className`	`string`	—	Additional CSS classes to apply to the error paragraph.