Warp Design System

Appearance

Text field - Usage ​

A text field is a single-line input component used for entering and editing textual data.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Guidelines ​

When to use ​

  • A user needs to input short, single-line information.
  • Placed in forms, filters, modals, or toolbars.

When not to use ​

  • Multi-line input is needed: use Text area component.
  • Selecting from fixed options: use Select component.
  • The content is fixed or system-generated: use a Read-only state.

Behaviour ​

  • Placeholder text is shown when the field is empty.
  • Icons and affixes (prefix/suffix) are non-interactive by default. Icons can optionally be used for actions related to the input content, e.g. clearing the field, toggling password visibility, opening the date picker, etc.
  • Icons must clearly indicate their function, in case of interaction, support keyboard navigation and screen reader, and should not interfere with typing or focus behaviour.
  • Error state overrides help text.
  • Optional tooltip appears on hover/focus of info icon.
  • Read-only disables keyboard input but keeps visual clarity.
  • Field supports keyboard navigation.

Interaction ​

Text field supports full keyboard and pointer interaction across platforms. Users can focus the field via tab or click, enter and edit text, and navigate using arrow keys.

All interactive elements of the text field, such as info tooltip or clear buttons must be keyboard-accessible and support focus states.

Content guidelines ​

  • Use a input label to clearly describe the purpose of the input, don’t rely on placeholder alone.
  • Keep input label text short and concise.
  • Use Placeholder text to provide brief instructions for the expected input. Since placeholder disappear when users start typing, avoid adding critical information.
  • Use the help text area for any examples or formatting hints, so that it's visible after the user enters text in the input area. Only use this where clarification is required, and try to avoid overuse.
  • Error text should be short, clear, and solution focused.

Visit our Language Specialists Text input guidance and best practices to ensure clear, consistent communication in all text inputs.

States ​

Default ​

Default text field with label, placeholder and help text
Empty field with placeholder.

Hover ​

Default text field with hover state
Field border highlights on mouse hover.

Active ​

Default text field with active state
Field is focused and ready for user input.

Filled ​

Default text field with filled state
Field contains user’s input.

Error ​

Default text field with error state
Failed input validation. It shows red border and actionable message below (help text).

Error hover ​

Default text field with active error state
Errored field border highlights on mouse hover.

Error active ​

Default text field with active error state
Field is focused but still in error state.

Disabled ​

Default text field with disabled state
Field cannot be interacted with, grayed out out visually.

Read-only ​

Default text field with read-only state
Input is visible but not editable.

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system