form-field — wyrd.component.form-field
Form control wrapper that provides reusable label, description, required, invalid, and error association semantics.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: FormField tag: wyrd-form-field package: wyrd.component.form-field title: Form Field summary: Form control wrapper that provides reusable label, description, required, invalid, and error association semantics.relationships: related-to: - quality-parity-and-gatesclassification: category: form-field composition: multi-slot interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: is-required type: kind: boolean required: false default: false reflects: true serializable: true summary: Marks the wrapped control as required. - name: is-invalid type: kind: boolean required: false default: false reflects: true serializable: true summary: Marks the wrapped control as invalid and associates the error slot. slots: - name: label required: true cardinality: exactly-one accepts: - text - node summary: Visible label and accessible-name source for the wrapped control. - name: control content: true required: true cardinality: exactly-one accepts: - component - node summary: Wrapped input, select, or other form control. - name: description required: false cardinality: zero-or-one accepts: - text - node summary: Hint or help text associated with the wrapped control. - name: error required: false cardinality: zero-or-one accepts: - text - node summary: Validation message associated when is-invalid is true. events: [] states: - name: default source: platform summary: Field with label and control. - name: required source: property summary: Required state derived from is-required. - name: invalid source: property summary: Invalid state derived from is-invalid. parts: - name: root summary: Field container. slots: - label - control - description - error - name: label summary: Label text. slots: - label - name: required-indicator summary: Required-state visual indicator. - name: control summary: Wrapped form control region. slots: - control - name: description summary: Description text. slots: - description - name: error summary: Error text. slots: - error tokens: root: gap: spacing.xs label: color: color.on-surface text: typography.label-md required-indicator: color: color.error description: color: color.on-surface-variant text: typography.body-md error: color: color.error text: typography.body-mdmessages: []obligations: accessibility: role: group name: Label slot provides the accessible name for the wrapped control. description: Description and error slots are programmatically associated with the wrapped control when the target platform exposes control association hooks. keyboard: - Keyboard behavior is owned by the wrapped control. semantics: - Required and invalid states are exposed on the wrapped control when the target platform allows it. - Error text is associated only when invalid. behavior: model: stateless interactions: - The wrapped control owns value and interaction behavior. - Invalid state associates the error slot and updates visual state. hostEffects: - Generate stable label, description, and error associations for the wrapped control where supported. conditions: - rtl - reduced-motion - cvd-deuteranopia - density-compact - text-expansion sdui: status: serializable serializableProperties: - is-required - is-invalid serializableSlots: - label - control - description - error eventBindings: [] notes: Form Field serializes wrapper semantics only; wrapped controls retain their own value and event contracts.examples: - name: empty state: default properties: {} slots: label: Name control: Text input description: Use the name shown to collaborators. - name: required state: required properties: is-required: true slots: label: Name control: Text input description: We need this to greet you. - name: invalid state: invalid properties: is-invalid: true is-required: true slots: label: Name control: Text input error: Name is required.
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdFormField } from "@wyrd-company/react";
<WyrdFormField label="Name" description="Use the name shown to collaborators.">
Text input
</WyrdFormField>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdFormField(
label: Text('Name'),
child: Text('Text input'),
description: Text('Use the name shown to collaborators.'),
)import { WyrdFormField } from "@wyrd-company/react";
<WyrdFormField isRequired label="Name" description="We need this to greet you.">
Text input
</WyrdFormField>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdFormField(
isRequired: true,
label: Text('Name'),
child: Text('Text input'),
description: Text('We need this to greet you.'),
)import { WyrdFormField } from "@wyrd-company/react";
<WyrdFormField isInvalid isRequired label="Name" error="Name is required.">
Text input
</WyrdFormField>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdFormField(
isInvalid: true,
isRequired: true,
label: Text('Name'),
child: Text('Text input'),
error: Text('Name is required.'),
)| Name | Type | Default | Summary |
|---|---|---|---|
is-required | boolean | false | Marks the wrapped control as required. |
is-invalid | boolean | false | Marks the wrapped control as invalid and associates the error slot. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
label | exactly-one | text, node | Visible label and accessible-name source for the wrapped control. |
control | exactly-one | component, node | Wrapped input, select, or other form control. |
description | zero-or-one | text, node | Hint or help text associated with the wrapped control. |
error | zero-or-one | text, node | Validation message associated when is-invalid is true. |
The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.
| Binding | Token | |
|---|---|---|
root.gap | spacing.xs | |
label.color | color.on-surface | |
label.text | typography.label-md | |
required-indicator.color | color.error | |
description.color | color.on-surface-variant | |
description.text | typography.body-md | |
error.color | color.error | |
error.text | typography.body-md |
| State | Source | Summary |
|---|---|---|
default | platform | Field with label and control. |
required | property | Required state derived from is-required. |
invalid | property | Invalid state derived from is-invalid. |
From the contract's accessibility obligations. Role group; Label slot provides the accessible name for the wrapped control.
Status: serializable. Form Field serializes wrapper semantics only; wrapped controls retain their own value and event contracts.
| Serializable | Members |
|---|---|
| Properties | is-required, is-invalid |
| Slots | label, control, description, error |
| Events | — |