TextField

A single- or multi-line text input with its label above it.

Consumer provides: the label, the value, an optional leading icon (search), optional helper or error text, an optional character limit (shows a "0/80" counter), and the IME action.

Rules

• Label above, shown once. Phone 14 sp Medium, tablet 18 sp Medium. An empty, focused field shows only the cursor — never repeat the label as a placeholder. A search field (no label) uses its placeholder as the label: "Search topics".
• 48 dp minimum height, 1 dp outline, radius-md, 12 × 10 dp inner padding, value in phone-body-large / tablet-body.
• Focus: 2 dp forest outline, no glow.
• Error: 2 dp urgent outline plus a Bold urgent helper line that says what went wrong and how to fix it. Never colour alone.
• Counters sit right-aligned under the field in muted, tabular numerals.
• Multi-line: the field grows with its content up to 5 lines, then scrolls with the scrollbar.

Compose

OutlinedTextField with the label rendered as a separate Text above (not the floating M3 label), shape = RoundedCornerShape(8.dp), focusedBorderThickness = 2.dp.

In the app

InkTextField.

• The label uses labelLarge, in ink.
• A muted helper line can sit under the field.
• Raw Material text fields are not used.

Preview