Components / Inputs / Text fieldOpen in Figma

Text field

Ready

A single-line input for short free text.

Platforms Phone · TabletGroup InputsUpdated 26 Oct 2026

When to use

  • The answer is short free text: a name, a number, a reference.
  • One answer per field.

When not to use

If people need toUse
Choose one of a known setDropdown
Enter a date or timeDate field
Choose people, sites or itemsPicker field
Switch something on or offSwitch

Anatomy

Valuebadge
Helper or error message
  1. Label · required
  2. Required mark · when the field must be filled
  3. Container · required
  4. Value or hint text · required
  5. Icon · optional, right side only
  6. Helper or error message · optional

Variants

VariantPurposeFigma
DefaultAny short textDesigned
With iconAn icon on the right that shows the kind of value or opens a pickerDesigned
With prefixA fixed part before the value, such as a country codeDesigned
Multi-lineDescriptions and longer answers; starts 112 tallDesigned
NotesA free note on a record, such as notes on a training session: Notes yellow fill, otherwise the same as multi-lineDesigned

States

StateWhenWhat changesFigma
EmptyNothing typed yetHint text in Hint greyDesigned
FilledA value is enteredValue in InkDesigned
FocusThe field is being typed inBorder turns Hint greyTemporary rule
ErrorThe value can't be acceptedRed border and a red message belowTemporary rule
DisabledThe field can't be changed nowDisabled fill, text in Hint greyTemporary rule

Behaviour

  • Tapping anywhere on the container focuses the field and opens the keyboard.
  • Errors show after the person leaves the field or presses the main action, never while typing.
  • The field keeps its height when an error appears; the message pushes content below it down.

Phone and tablet

PhoneTablet
Label to field812
Field widthFull width of the sectionTwo fields side by side when they belong together

Content

PartRule
LabelA noun in sentence case, no colon, two or three words
Hint textAn example of the expected value, not an instruction
Error messageSays what to fix in one line, starting with a verb

Do and don't

Hint text
Valuekeyboard_arrow_down
DoKeep every field on a screen the same height.
Hint text
Valuekeyboard_arrow_down
Don'tMix heights or border colours.
Hint text
DoKeep the label above the field at all times.
Label as hint text
Don'tUse hint text as the label. It disappears once typing starts.
DropdownDate fieldPicker fieldForm layout
← StatusDropdown →