Input

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

Preview

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

Code

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) {},
    );
  }
}

API

Prop	Type	Default	Notes
controller	TextEditingController?	null	External controller; widget owns one when null
initialValue	String?	null	Seeds the internally-owned controller. Ignored when controller is provided
onChanged	ValueChanged<String>?	null	Fired on every keystroke
placeholder	String?	null	Empty-state hint text
label	String?	null	Title rendered above the field; maps to Figma title axis
maxLength	int?	null	When non-null, switches to tall layout with 0/N counter
enabled	bool	true	false → disabled style, no interaction
width	double?	null	Field width; falls back to 300 (Figma frame default)
focusNode	FocusNode?	null	External focus node; widget owns one when null

Notes

• Filled style only; outlined / underlined variants are not part of the Promeo input system.
• Counter layout (maxLength set) bumps total field height; account for this in tight vertical layouts.