form-field — wyrd.component.textarea

Textarea

Multiline text input field with label, description, validation state, and one canonical value-change event. Flutter ignores the web-only resize affordance.

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

catalog/contracts/textarea.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Textarea  tag: wyrd-textarea  package: wyrd.component.textarea  title: Textarea  summary: Multiline text input field with label, description, validation state, and one canonical value-change event. Flutter ignores the web-only resize affordance.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: form-field  composition: multi-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: value      type:        kind: string      required: false      controlled: true      serializable: true      summary: Controlled text value.    - name: default-value      type:        kind: string      required: false      serializable: true      summary: Initial uncontrolled text value.    - name: rows      type:        kind: integer        minimum: 2        maximum: 20      required: false      default: 3      serializable: true      summary: Visible text rows.    - name: resize      type:        kind: enum        values:          - none          - vertical      required: false      default: vertical      serializable: true      summary: User resize affordance on web; Flutter ignores this property.    - name: is-disabled      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Prevents editing and exposes disabled semantics.    - name: is-required      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Marks the field as required.    - name: is-invalid      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Marks the value as invalid and associates the error slot.  slots:    - name: label      required: true      cardinality: exactly-one      accepts:        - text      summary: Visible label and accessible-name source.    - name: description      required: false      cardinality: zero-or-one      accepts:        - text      summary: Help text associated with the input.    - name: error      required: false      cardinality: zero-or-one      accepts:        - text      summary: Validation error associated when is-invalid is true.  events:    - name: value-change      payload:        value:          kind: string        action:          kind: action-ref      bubbles: true      composed: true      cancelable: false      summary: Canonical value-change event carrying the next string value.  states:    - name: default      source: platform      summary: Empty enabled state.    - name: focus-visible      source: platform      summary: Keyboard-visible focus state.    - name: disabled      source: property      summary: Disabled state derived from is-disabled.    - name: invalid      source: property      summary: Invalid state derived from is-invalid.    - name: required      source: property      summary: Required state derived from is-required.    - name: filled      source: property      summary: State when value or default-value has content.  parts:    - name: root      summary: Field container.      slots:        - label        - description        - error    - name: label      summary: Label text.      slots:        - label    - name: control      summary: Editable multiline 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    control:      background: color.surface      foreground: color.on-surface      placeholder: color.on-surface-variant      border-color: color.outline      border-color-focus: color.primary      border-color-invalid: color.error      border-width: 1px      radius: rounded.sm      padding-x: spacing.md      padding-y: spacing.sm      text: typography.body-md    description:      color: color.on-surface-variant      text: typography.body-md    error:      color: color.error      text: typography.body-mdmessages: []obligations:  accessibility:    role: textbox    name: Label slot provides the accessible name.    description: Description and error slots are programmatically associated with the control.    keyboard:      - Text input follows platform editing keys.      - Tab moves focus into and out of the field in document order.    semantics:      - Required, invalid, and disabled states are exposed through platform semantics.      - Error text is associated only when invalid.      - The control exposes multiline text entry semantics where the platform supports it.  behavior:    model: input    interactions:      - Editing emits value-change with the next string value.      - Invalid state associates the error slot and updates visual state.    hostEffects:      - Dispatch value-change event.      - Bind value to SDUI form state when present.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - value      - default-value      - rows      - resize      - is-disabled      - is-required      - is-invalid    serializableSlots:      - label      - description      - error    eventBindings:      - value-change    notes: Value-change serializes to a named binding/action channel; resize is a web-only affordance ignored by Flutter.examples:  - name: empty    state: default    properties:      rows: 3    slots:      label: Notes      description: Add context for collaborators.  - name: filled    state: filled    properties:      default-value: Bob prefers concise written updates.      rows: 4    slots:      label: Notes  - name: invalid    state: invalid    properties:      value: ""      is-invalid: true      is-required: true      rows: 3    slots:      label: Notes      error: Notes are required.

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.

empty state: default

Notes

Add context for collaborators.

Usage

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

<WyrdTextarea rows={3} label="Notes" description="Add context for collaborators." />

// events: onValueChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdTextarea(
  rows: 3,
  label: Text('Notes'),
  description: Text('Add context for collaborators.'),
)

// events: onChanged

filled state: filled

Notes

Usage

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

<WyrdTextarea defaultValue="Bob prefers concise written updates." rows={4} label="Notes" />

// events: onValueChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdTextarea(
  initialValue: 'Bob prefers concise written updates.',
  rows: 4,
  label: Text('Notes'),
)

// events: onChanged

invalid state: invalid

Notes

Notes are required.

Usage

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

<WyrdTextarea value="" isInvalid isRequired rows={3} label="Notes" error="Notes are required." />

// events: onValueChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdTextarea(
  value: '',
  isInvalid: true,
  isRequired: true,
  rows: 3,
  label: Text('Notes'),
  error: Text('Notes are required.'),
)

// events: onChanged

Properties

Name	Type	Default	Summary
`value`	`string`	`undefined`	Controlled text value.
`default-value`	`string`	`undefined`	Initial uncontrolled text value.
`rows`	`integer`	`3`	Visible text rows.
`resize`	`none \| vertical`	`vertical`	User resize affordance on web; Flutter ignores this property.
`is-disabled`	`boolean`	`false`	Prevents editing and exposes disabled semantics.
`is-required`	`boolean`	`false`	Marks the field as required.
`is-invalid`	`boolean`	`false`	Marks the value as invalid and associates the error slot.

Slots & events

Slot	Cardinality	Accepts	Summary
`label`	exactly-one	`text`	Visible label and accessible-name source.
`description`	zero-or-one	`text`	Help text associated with the input.
`error`	zero-or-one	`text`	Validation error associated when is-invalid is true.

Event	Payload	Summary
`value-change`	`value, action`	Canonical value-change event carrying the next string value.

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
`root.gap`	`spacing.xs`
`label.color`	`color.on-surface`
`label.text`	`typography.label-md`
`control.background`	`color.surface`
`control.foreground`	`color.on-surface`
`control.placeholder`	`color.on-surface-variant`
`control.border-color`	`color.outline`
`control.border-color-focus`	`color.primary`
`control.border-color-invalid`	`color.error`
`control.border-width`	`1px`
`control.radius`	`rounded.sm`
`control.padding-x`	`spacing.md`
`control.padding-y`	`spacing.sm`
`control.text`	`typography.body-md`
`description.color`	`color.on-surface-variant`
`description.text`	`typography.body-md`
`error.color`	`color.error`
`error.text`	`typography.body-md`

States

State	Source	Summary
`default`	platform	Empty enabled state.
`focus-visible`	platform	Keyboard-visible focus state.
`disabled`	property	Disabled state derived from is-disabled.
`invalid`	property	Invalid state derived from is-invalid.
`required`	property	Required state derived from is-required.
`filled`	property	State when value or default-value has content.

SDUI

Status: serializable. Value-change serializes to a named binding/action channel; resize is a web-only affordance ignored by Flutter.

Serializable	Members
Properties	`value, default-value, rows, resize, is-disabled, is-required, is-invalid`
Slots	`label, description, error`
Events	`value-change`

  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

Properties

Slots & events

Tokens

States

Accessibility

SDUI