TextInput

TextInputs are used to allow users to enter data into the interface. Most commonly found in form layouts as one of the most important form elements.

Component Status

Design

Is the design finished and component available in Figma library?

Up to date

React

Is new design vision part implemented using new tokens?

Up to date

Flutter

Is new design vision part implemented using new tokens?

Update required

 

Introduction

TextInputs enable users to enter text or select data. You can use them for long and short-form entries. The type of Input used should reflect the length of the content you expect the user to enter.

When to use

  • A user needs to input unique information that cannot be predicted with a preset of options.
  • A user needs to input memorable data that can be entered more quickly in a free-hand format versus a more complex control.

When not to use

  • If a user can only enter an option from a predefined list then avoid using a text input as it is likely to result in an error. Consider using a selection input or control such as a dropdown, select, or radio button group instead.

Releated components & guidelines