Form Field

Preview

<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.

<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

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.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.