Input

The canonical text input. Renders in filled style on surface01; hover and focus add a 1px teal accent border. When maxLength is set, the field switches to the tall, counter-bearing layout with 0/N rendered bottom-right.

PromeoInput via Flutter micro-app at /preview. Live state pushed via postMessage.

From snapshot v2026.05.15-001. Reflects the published defaults, not live playground state — see PRD 02 §6 snapshot-fidelity rule.

// from snapshot v2026.05.15-001
import 'package:flutter/material.dart';
import 'package:promeo_design_system/promeo_design_system.dart';

class InputSample extends StatelessWidget {
  const InputSample({super.key});

  @override
  Widget build(BuildContext context) {
    return PromeoInput(
      label: 'Product name',
      placeholder: 'e.g. Wireless mouse',
      maxLength: 60,
      onChanged: (v) {},
    );
  }
}

Anatomy

Anatomy diagram pending. The field box sits filled on surface01 with a placeholder and leading affordance; a label row and a 0/N counter are additive. The Figma input_field board (qSGwqIJWW8r9E4NvLsdRTx, node 1:119) documents three layouts, all the same widget with different props:

Text field (plain) — just the field box, placeholder, and leading affordance. No label, no counter.
Text field with title — adds a label row above the field.
Text field with title and word limit — adds the 0/N counter (driven by maxLength) and the tall layout.

Variants

Plain

PromeoInput via Flutter micro-app at /preview. Live state pushed via postMessage.

PromeoInput(
  placeholder: 'e.g. Wireless mouse',
  onChanged: (v) {},
)

With title

PromeoInput via Flutter micro-app at /preview. Live state pushed via postMessage.

PromeoInput(
  label: 'Product name',
  placeholder: 'e.g. Wireless mouse',
  onChanged: (v) {},
)

With title + word limit

PromeoInput via Flutter micro-app at /preview. Live state pushed via postMessage.

PromeoInput(
  label: 'Product name',
  placeholder: 'e.g. Wireless mouse',
  maxLength: 60,
  onChanged: (v) {},
)

In Flutter

PromeoInput(
  label: 'Product name',
  placeholder: 'e.g. Wireless mouse',
  maxLength: 60,
  onChanged: (next) => setState(() => value = next),
)

Props

Prop	Type	Default	Notes
`controller`	`TextEditingController?`	`null`	External controller. If null, the widget creates its own and seeds it with [initialValue].
`initialValue`	`String?`	`null`	Seed value for the internally-owned controller. Ignored when [controller] is provided.
`onChanged`	`ValueChanged<String>?`	`null`	Notified on every keystroke.
`placeholder`	`String?`	`null`	Placeholder text when value is empty.
`label`	`String?`	`null`	Title label rendered above the field. Maps to Figma `title` axis.
`maxLength`	`int?`	`null`	Maximum character count. When non-null, switches to the tall layout with a `0/N` counter rendered bottom-right. Maps to Figma `number` axis.
`enabled`	`bool`	`true`	`false` → disable interaction and render in [PromeoInputStatus.disable] style.
`width`	`double?`	`null`	Field width. Defaults to 300 (matches Figma frame).
`focusNode`	`FocusNode?`	`null`	External focus node. If null, the widget creates its own.

Notes

Filled style only; outlined / underlined variants are not part of the Promeo input system.
Hover and focus add the 1px teal accent border automatically — there is no prop for it.
enabled: false renders the disabled style and blocks interaction.
The 0/N counter appears only when maxLength is set; that variant also bumps the field height, so account for it in tight vertical layouts.