form-field — wyrd.component.input-group

InputGroup

Composition wrapper that visually attaches leading or trailing addons to one Text Field.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/input-group.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: InputGroup  tag: wyrd-input-group  package: wyrd.component.input-group  title: Input Group  summary: Composition wrapper that visually attaches leading or trailing addons to one Text Field.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: form-field  composition: multi-slot  interactive: falsetarget-strategy:  react: required  flutter: requiredsurface:  properties: []  slots:    - name: field      content: true      required: true      cardinality: exactly-one      accepts:        - component      summary: Text Field that retains label, value, validation, disabled state, and editing behavior.    - name: leading-addon      required: false      cardinality: zero-or-one      accepts:        - text        - icon        - component      summary: Text, icon, or button visually attached before the text control and associated as its description.    - name: trailing-addon      required: false      cardinality: zero-or-one      accepts:        - text        - icon        - component      summary: Text, icon, or button visually attached after the text control and associated as its description.  events: []  states:    - name: default      source: platform      summary: Enabled Text Field with one or more attached addons.    - name: disabled      source: platform      summary: Visual state inherited from the disabled Text Field.    - name: invalid      source: platform      summary: Error visual state inherited from the invalid Text Field.  parts:    - name: root      summary: Field-level composition wrapper.      slots:        - field        - leading-addon        - trailing-addon    - name: leading-addon      summary: Visually fused leading addon.      slots:        - leading-addon    - name: trailing-addon      summary: Visually fused trailing addon.      slots:        - trailing-addon  tokens:    addon:      background: color.surface-container      foreground: color.on-surface-variant      border-color: color.outline      border-width: 1px      padding-x: spacing.md      padding-y: spacing.sm      text: typography.body-md      background-disabled: color.disabled      foreground-disabled: color.on-surface-variant    radius: rounded.smmessages: []obligations:  accessibility:    role: none    keyboard:      - The Text Field and interactive addon children retain native keyboard behavior and document-order focus.    semantics:      - Text addon content is programmatically associated with the Text Field control as descriptive content.      - Icon-only and button addons retain their own accessible names.      - The wrapper adds no form-control role and does not duplicate Text Field semantics.  behavior:    model: stateless    interactions:      - Text Field owns value, editing, focus, disabled, required, and invalid behavior.      - Interactive addons own their activation behavior.      - Disabled and invalid visuals follow the composed Text Field state.    hostEffects:      - Associate addon descriptions with the composed Text Field where the target exposes association hooks.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties: []    serializableSlots:      - field      - leading-addon      - trailing-addon    eventBindings: []    notes: Input Group serializes composition only; the nested Text Field retains its own value and event bindings.examples:  - name: leading-text    state: default    properties: {}    slots:      field: Website Text Field      leading-addon: https://  - name: trailing-text    state: default    properties: {}    slots:      field: Price Text Field      trailing-addon: USD  - name: action-addon    state: default    properties: {}    slots:      field: Search Text Field      trailing-addon: Search buttonoverrides:  react:    slots:      field: children      leading-addon: leadingAddon      trailing-addon: trailingAddon  flutter:    slots:      field: child      leading-addon: leadingAddon      trailing-addon: trailingAddon

Examples

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.

Code target React Flutter Applies to every example on component pages.

leading-text state: default

https://

Website

Usage

import { WyrdInputGroup } from "@wyrd-company/react";

<WyrdInputGroup leadingAddon="https://">
  Website Text Field
</WyrdInputGroup>

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdInputGroup(
  child: Text('Website Text Field'),
  leadingAddon: Text('https://'),
)

trailing-text state: default

Price

USD

Usage

import { WyrdInputGroup } from "@wyrd-company/react";

<WyrdInputGroup trailingAddon="USD">
  Price Text Field
</WyrdInputGroup>

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdInputGroup(
  child: Text('Price Text Field'),
  trailingAddon: Text('USD'),
)

action-addon state: default

Search button

Usage

import { WyrdInputGroup } from "@wyrd-company/react";

<WyrdInputGroup trailingAddon="Search button">
  Search Text Field
</WyrdInputGroup>

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdInputGroup(
  child: Text('Search Text Field'),
  trailingAddon: Text('Search button'),
)

Slots & events

Slot	Cardinality	Accepts	Summary
`field`	exactly-one	`component`	Text Field that retains label, value, validation, disabled state, and editing behavior.
`leading-addon`	zero-or-one	`text, icon, component`	Text, icon, or button visually attached before the text control and associated as its description.
`trailing-addon`	zero-or-one	`text, icon, component`	Text, icon, or button visually attached after the text control and associated as its description.

Tokens

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
`addon.background`	`color.surface-container`
`addon.foreground`	`color.on-surface-variant`
`addon.border-color`	`color.outline`
`addon.border-width`	`1px`
`addon.padding-x`	`spacing.md`
`addon.padding-y`	`spacing.sm`
`addon.text`	`typography.body-md`
`addon.background-disabled`	`color.disabled`
`addon.foreground-disabled`	`color.on-surface-variant`
`radius`	`rounded.sm`

States

State	Source	Summary
`default`	platform	Enabled Text Field with one or more attached addons.
`disabled`	platform	Visual state inherited from the disabled Text Field.
`invalid`	platform	Error visual state inherited from the invalid Text Field.

SDUI

Status: serializable. Input Group serializes composition only; the nested Text Field retains its own value and event bindings.

Serializable	Members
Properties	`—`
Slots	`field, leading-addon, trailing-addon`
Events	`—`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Slots & events

Tokens

States

Accessibility

SDUI