Text field

A filled field with an accent ring on focus. The app's are tall and soft; the reference style is compact with an icon and a hint.

Side by side

Mafold todayui.tsx · TextInput

BoardUI stylerebuilt on MDS tokens

Email *This is a hint about this input.

Measures

Mafold: 48px tall (40 in dense forms), --mf-bubble fill, 14px radius, 16px text, a 3px --mf-ring on focus. Reference: 36px, 10px radius, 14px text, leading icon, help glyph and a hint line.

Usage

import { TextField } from "@/components/mafold";

<TextField placeholder="Display name" />
<TextField compact placeholder="Label" />