Text field

Overview

The Text field is the canonical single-line input. Its signature move is the always-floating label: the field name sits at the top of the container in small grey text; the value sits below it in body type. No animation, no Material-style transition — the label is just always there, in its place. Use it everywhere a form asks the user for one line.

States

Six visible states. Hover, active, and focus are pseudo-class driven — they come for free on the real components. Held still here for review.

Variants

One component, five type-specific wrappers. Reach for the wrapper that matches the data — the wrapper sets autoComplete, inputMode, and (where relevant) the affordance (e.g. password reveal eye).

Compositions

Prefix, suffix, help text, error message — the same four slots handle every common composition. Reach for them via props rather than nesting buttons inside the input's children.

Multiline

For values that need more than one line — a description, a cancellation reason, a long note — reach for TextArea. Same visual language as TextField; rendered as a real <textarea> element with native vertical resize.

Anatomy

Five named parts. Only the box is required — label, prefix / suffix, description, and error are opt-in.

Behavior

• 01Click anywhere in the container focuses the input. The whole tile is wrapped in a <label> tied to the input via htmlFor. Don't intercept clicks on the label area.
• 02Border darkens on focus, ring shows on keyboard only. focus-within switches the border to border-foreground for any focus; has-[:focus-visible] adds the ring-ring ring only when the user arrived via keyboard.
• 03Help text and errors are linked via aria-describedby. The component generates the IDs, attaches them, and switches from description to errorwhen the error prop is set. Don't hand-roll a separate paragraph.
• 04Password reveal is opt-in. PasswordField ships with the eye toggle on by default; pass showPasswordToggle={false} for fields where revealing the value would be unsafe (keypad entry, shared screens).
• 05Search clear button only appears when there's content. No empty × glyph cluttering the resting state. The button focuses the field after clearing.

Accessibility

• Native semantics. Renders an <input> inside a <label> via htmlFor. No custom ARIA needed for the basic field.
• Description and error are linked via aria-describedby. When the error prop is set, the input also gets aria-invalid="true".
• Use the right type. Mobile keyboards and assistive tech adapt to type="email", type="url", and inputMode="decimal". Reach for the typed wrappers — they pre-set everything.
• Autocomplete tokens. The wrappers set sensible defaults (autoComplete="email", autoComplete="current-password"). Override per-field when the form context calls for it (e.g. new-password on a registration form).
• Don't hide the label. The always-floating label is the design — never set it to sr-only or rely on the placeholder for context. Placeholders disappear on type; labels stay.

Code

Import from @flatpay-dk/ui. Renders a real native input — every standard input attribute (name, required, pattern,minLength) passes through.

import {
  TextField,
  EmailField,
  UrlField,
  PasswordField,
  NumberField,
  TextArea,
} from "@flatpay-dk/ui";

// Default — text input
<TextField
  label="Store name"
  description="Use a memorable name customers will recognise."
  name="store_name"
  required
/>

// Email — pre-set type, autoComplete, mobile keyboard
<EmailField
  label="Email address"
  placeholder="you@flatpay.com"
  description="We'll send a one-time link to sign in."
/>

// Password — eye toggle on by default
<PasswordField label="Password" autoComplete="new-password" />

// URL — type=url + inputMode=url
<UrlField label="Website" placeholder="https://example.com" />

// Number — tabular-nums + decimal keyboard
<NumberField label="Daily settlement cutoff" min={0} max={23} />

// Prefix slot — ≤3-character adornments only
<TextField
  label="Phone number"
  type="tel"
  prefix={<span className="font-mono text-[13px]">+45</span>}
  defaultValue="20 12 34 56"
/>

// Multiline
<TextArea
  label="Description"
  rows={4}
  description="Visible to customers on the storefront."
/>

// Invalid + error message
<TextField
  label="Repository"
  error="Couldn't find this repo. Check the owner/name spelling."
/>

Best practices

A handful of habits keep forms predictable across the product.

Props

Related