Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Text field

Text field

Single-line inputs and textareas with label and supporting text.

Anatomy

  • 1 .text-field-root Field composition and message boundary.
  • 2 .text-field-label Accessible field label.
  • 3 .text-field-control Outlined field container.
  • 4 .text-field-icon-start Optional leading icon aligned with the input.
  • 5 .text-field-input Native input or headless input part.
  • 6 .text-field-textarea Multiline text entry part.
  • 7 .text-field-adornment Optional trailing text adornment (e.g. a "px" unit).
  • 8 .text-field-supporting-text Description, counter, or validation message.

Variants

  • Single line
  • Multiline

Slots

What the component can hold. Every other combination — emphasis, size, shape — is a configuration; pick those in Use.

Shown in the theme gallery.
Default
Start icon
px
Type a value in pixels.
Number

When to use

Use a text field when people need to enter or edit a short value that cannot be chosen from a fixed list.