Field

Completedshipped in 0.1.0StorybookFigma node 141:3144Source

Usage

When to use it

Use field to wrap any input control with a label, an optional required mark and helper or error text — used by Input, Select, Textarea and Checkbox groups alike.

From the Lumo.Web.Component.V1.0.Complete library — the field description, read 2026-10-19.

Where it goes

• in a form, wrapping one input control

When not to use it

• Don’t write the field’s own error styling into the control; field carries it.
  • No alternative named. The source states the prohibition without saying what to reach for instead.

What each variant is for

Property	Value	What it is for
state	default	not stated in the source
state	error	not stated in the source
state	disabled	not stated in the source
state	Type	not stated in the source

Variant meanings are not stated

The component description says what the component is for, never what an individual value means. Every value above is implemented and tested; what each one is for is a design decision nobody has written down.

Owner: human:designer

Accessibility

• renders exactly one <label> whose htmlFor points at the caller own control, so the label and the control are genuinely associated
  src/components/field/field.jsx:155
• htmlFor is omitted entirely when no control has been named, rather than writing an empty reference
  src/components/field/field.jsx:155
• in the error state the helper row becomes role=“alert”, so a validation message is announced when it appears
  src/components/field/field.jsx:176
• the required asterisk is aria-hidden and the announced word is in a screen-reader-only span, so “required” is read rather than “star”
  src/components/field/field.jsx:163
• the error icon is decoration
  src/components/field/fieldIcon.jsx:22

Composition

Nothing in the stories shows this component composed with another.

What this version promises

See Versioning. At 0.1.0 the public surface is the named exports of src/index.ts; this component is one of them.

No release review

No release verdict has been recorded for this component, and its Development status reads Completed. It has not been independently reviewed against its Figma node by anything but the test suite, which compares it against its own documented API.

Owner: release

Examples

Every story that is not a variant-matrix row, embedded live from the deployed Storybook in both themes. The matrix itself is on the Design tab.

Required

Without helper

With a real control

With a group control

Long label and helper

Code

Import

import { Field } from '@ds-house/lumo-design-system';

Props

Prop	Type	Default	Notes
state	`‘default’	‘error’	‘disabled’
label	string	''	Figma Label (141:3120). The text of the label row.
required	boolean	false	Figma Required (141:3121), the mark hidden in all four variants. Shows the red asterisk and appends requiredText for screen readers.
requiredText	string	'required'	Not a Figma property. The asterisk is decoration, so the word a screen reader announces has to come from somewhere; this is it.
helper	boolean	true	Whether the helper row shows at all. The node draws it in every variant.
helperText	string	''	Figma Helper (141:3125 / 141:3135). In error this is the error message and the row grows an icon.
iconName	string	'close'	Material Symbols glyph for the error icon. Defaults to close, which is what node 90:8 draws.
children	React.ReactNode	—	The ↳Control slot (141:3122 and friends). Put the real Input, Select, Textarea or Checkbox group here. Named children per the Card precedent in docs/naming-conflicts.md, since the field has exactly one slot.
id	string	—	Seeds the ids of the label row (${id}-label) and the helper row (${id}-helper), so a control in the slot can reference either. Generated when absent — and a generated id is useless to you, so pass one whenever you need to wire aria-labelledby or aria-describedby.
controlId	string	—	The id of the labelable control inside the slot. Pass it and the label gets for; omit it and the label gets no for at all. There is no guessed default: the field cannot see what you put in the slot, and a for pointing at nothing is worse than none. Only pass this for an element for can legally name — input, select, textarea, button, meter, output, progress. For anything else (a checkbox or radio group, a custom combobox), leave it off and point that thing at ${id}-label with aria-labelledby.
className	string	''

Union types

• state: 'default'|'error'|'disabled'|'Type'

Tokens it needs

Token	Light	Dark
--body-body3	not in the build	—
--border-radius-card	not in the build	—
--border-width-default	not in the build	—
--color-bg-surfaceprimary	not in the build	—
--color-border-negative-focused	not in the build	—
--color-border-primary-default	not in the build	—
--color-icon-negative	not in the build	—
--color-text-disabled	not in the build	—
--color-text-negative	not in the build	—
--color-text-placeholder	not in the build	—
--color-text-primary	not in the build	—
--color-text-secondary	not in the build	—
--label-label1	not in the build	—
--size-control-md	not in the build	—
--size-icon-sm	not in the build	—
--spacing-gap-horizontal-xs	not in the build	—
--spacing-gap-xs	not in the build	—
--spacing-padding-md	not in the build	—
--typography-fontweight-regular	not in the build	—

A dash under Dark means the token does not change between themes.

Storybook’s own props table

Design

The Figma node

The embed may not load

The Figma file is team-only. If the frame above is blank, open the node directly from the header link — a 403 from a team-only file is expected, not a broken link.

The variant matrix

Each row as the set draws it, in both themes.

Default

Open in Storybook

Error

Open in Storybook

Disabled

Open in Storybook

Type

Open in Storybook

All states

Open in Storybook

What Figma never bound, and the gaps recorded against it

The build report docs/field.md records no “Design gaps” section.

From the build report, docs/field.md.

Where Figma and this repo disagree across the system, see the disagreements record.

Changelog

Every commit touching this component and its subcomponents — a change to a subcomponent changes the component, and a log that reads only the parent file misses it.

Commit	Date	Shipped in	Subject
2b94809	2026-10-19	unknown	Write the ten component intent files
c8bc699	2026-10-18	unknown	Add the test suite, and retire the deliberate stop
9525e0f	2026-10-17	unknown	Make the repo a publishable npm package
bada657	2026-10-15	unknown	Field: stop guessing the label’s target, and correct two doc claims
72bf468	2026-10-15	unknown	Build Field from Figma 141:3144 — four states, six gaps reported

Generated from commit 7ccfbbb53757.