Studio
Studio/Kits
New kit
Canonical inventory
Forms · core

Text field

field.text

A text field is a labeled single-line control for entering or editing text.

text fieldthe gray text inside a boxtext that disappears when you typesingle-line inputthe place you enter a valuethe input control
States8
Touch target44px
Evidence6
Introduced by8 kits
Visual specimen

Same contract. Every kit voice.

MAVAN renderingdefault
Translation table

What code calls it.

Web<input type=text>The closest native or standardized web primitive.direct
ARIAtextboxThe primary accessibility role or state pattern.direct
SwiftUITextFieldThe nearest named SwiftUI API.direct
AppKitNSTextFieldThe nearest named AppKit API.direct
Anatomy

Every part, named.

  1. 1Visible label
  2. 2Input container
  3. 3Entered value
  4. 4Placeholder
  5. 5Helper or error message
  6. 6Focus indicator
Often confused with

Similar shape. Different contract.

Search fieldfield.search

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt composerfield.composer

Shares a visual family, but has a different role, state model, or interaction contract.

Textareafield.textarea

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Text field component (field.text). A text field is a labeled single-line control for entering or editing text. Support these states: default, hover, focus-visible, active, disabled, filled, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

default · hover · focus-visible · active · disabled · filled · error · loading

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion

Source union

mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin