Prototype Library

Form Field

A presentational layout wrapper — label row, control slot, and hint/error text. Pure .astro with no runtime JS; drop any control into the slot. Error text replaces help text when present.

Inherited .astro import EsaFormField from '@esa/ecology/esa-form-field.astro';

Preview

We will never share your email.

<FormField label="Email" helpText="We will never share your email.">
  <input type="email" placeholder="you@example.com" />
</FormField>

States

Mark a field required, surface an errorText in place of help text, or disabled the whole field.

Permit ID is required.

This field cannot be edited.

<FormField label="Project name" required>
  <input type="text" />
</FormField>

<FormField label="Permit ID" errorText="Permit ID is required." required>
  <input type="text" aria-invalid="true" />
</FormField>

<FormField label="Locked field" helpText="This field cannot be edited." disabled>
  <input type="text" disabled value="Read only" />
</FormField>

Sizes

The size prop scales the label; size the control yourself to match.

<FormField label="Extra small label" size="xs"> … </FormField>
<FormField label="Small label" size="sm"> … </FormField>
<FormField label="Medium label" size="md"> … </FormField>
<FormField label="Large label" size="lg"> … </FormField>

API

PropTypeDefaultDescription
label string '' Label rendered above the control slot.
helpText string '' Helper text shown below the control.
errorText string '' Error message; replaces help text when present.
required boolean false Renders an asterisk on the label.
disabled boolean false Dims the field and blocks pointer events.
size 'xs' | 'sm' | 'md' | 'lg' 'md' Scales the label font size.

The control goes in the default slot — the wrapper makes no assumptions about it.

Accessibility

  • The wrapper is presentational only; associate the label and control yourself (e.g. a for/id pair) since the slot content is opaque to it.
  • The required asterisk carries an aria-label="required".
  • Set aria-invalid="true" on the slotted control whenever errorText is shown.
  • disabled dims the field and blocks pointer events; also disable the underlying control for keyboard users.