Warp Design System

Appearance

Text field ​

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

ReactreleasedVuereleasedElementsreleasedAndroidreleasediOSreleased

It supports a wide range of behaviours, labels, icons, prefixes/suffixes, tooltips, and error handling to support various use cases and accessibility needs. Text fields are a fundamental element of forms and search experiences across the product ecosystem.

Related components: Text area, Select.

Examples ​

Variants ​

Default ​

Default text field with label, placeholder and help text
Standard input with a label, hint (placeholder), and optional help text below. Use this variant in most cases, when clarity is important, and the field needs context both before (label) and after (help text) user interaction.

Label only ​

Text field with label only
An input with a label above the field, no help text. When space is limited or help text is not necessary. Ideal in short or repeated forms (e.g. settings, profile forms).

Text field only ​

Text field only
A bare input with only a placeholder inside, and no label or help text. Use with extreme caution. Best suited for one-off interactions, short filters, or embedded in UI elements like search bar, toolbars, etc.

Optional and info tooltip ​

Text field with label, followed by optional text and info icon, and help text
An input field with an optional label indicator (Optional) and/or an info icon that opens a tooltip. Use these when the field is not required, and/or users may need extra clarification on how to fill it in. The Optional label and the info tooltip are independent options, they can be enabled or disabled separately depending on the use case.

Suffix and prefix ​

Text field with label, help text and affixes in the text field
Visual indicators inside the input field, before (prefix) or after (suffix) the user-entered value: e.g. kr, kg, %. These help users understand the expected format or unit of input. Prefix and Suffix can be used independently, together, or not at all, they are not tied to each other.

Icon left and right ​

Text field with label, help text and icon affixes in the text field
Icons placed inside the input field on the left, right, or both sides. Provides visual affordance or quick actions related to the field. Left and Right icons are separate, independent options, that’s possible to use either one, both, or none based on need.

Anatomy ​

Anatomy illustration, 1-7
Anatomy illustration, 8-10

  1. Input label (optional)
  2. Input field
  3. Optional indicator (optional)
  4. Info tooltip (optional)
  5. Hint (placeholder)
  6. Left icon (optional)
  7. Right icon (optional)
  8. Suffix (optional)
  9. Prefix (optional)
  10. Help text (optional)

Questions? ​

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