Form Field

Form Fields 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.

Design documented

The component is fully documented

React documented

Flutter documented

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?

Up to date

 

Introduction

Form fields 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