Skip to content

role textbox

Text field draft v0.1.0

Lets people enter or edit a single line of text.

A text field collects one line of free text: a name, an email address, a search term, a quantity typed as text. It has a visible label above, an optional description and, when its value fails validation, an error message under it. Several lines of text are a Textarea; a choice among known values is a Select.

Decisions

From decisions in packages/components/specs/components/text-field.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

  • The control is a box on the default surface outlined in the accent neutral border color; hover tints it with the surface hover color and keeps the border; invalid takes the base error border; read-only takes the level 1 surface; disabled takes the shared disabled colors. Value text is primary, the placeholder tertiary, the description secondary, the error message the error text color.

    The Figma library maps no color to form controls. The accent neutral border is the lightest neutral border that keeps 3:1 against the surface in both modes (WCAG 1.4.11); the hover tint reuses the surface's own hover step.

    field-colors · 2026-10-03 · v0.1.0

    text-field.control.background.*text-field.control.border-color.*text-field.control.color.*

    WCAG 1.4.11 Non-text Contrast (AA)

Size

  • Three sizes from the Figma library's space and body scales: small (32 px high, 8 px inline padding, 14 px text), medium (40, 12, 16, the default) and large (48, 16, 20); the border is 0.6 px (stroke-width.sm) and the corners 4 px (corner-radius.xs) at every size; label, description and error message keep 14 px.

    sizes · 2026-10-03 · v0.1.0

    text-field.control.min-height.*text-field.control.padding-inline.*text-field.control.typography.*text-field.control.border-widthtext-field.control.border-radius

Anatomy

Behaviour