Components

Input Fields

Input fields allow the user to enter and submit text or similar content. This guide explains their usage

Usage
  • Usage
  • Examples
  • Related components
  • Download

Usage

Text fields

There are different kinds of text fields that can be used to submit data. Regular text fields are one-line, free-form fields that can hold any kind of content. In addition to the regular text fields, you can use text areas for larger amounts of text. Text fields can also contain a validation check to reflect the status of the user’s input. This helps users understand if their input is correct or wrong.

Formatted text fields

Formatted text fields help display data inside input fields. These can range from credit card numbers or phone numbers to shipping codes, currency amounts, or expiration dates.

Grouped form fields

Another way of displaying multiple form fields is by using grouped forms. This allows you to group similar forms and separate them from non-similar forms. This can be used in surveys, for example.

Interactive form fields

A number of interactive form fields are available to support users when submitting data. Password fields can, for example, contain an icon to toggle the visibility of the password. A copy icon can make the use of text fields more convenient by selecting and copying text to the clipboard.

Other interactive forms can be text fields for inputting package sizes and include an icon to open a list of predefined package size or weight options.

Examples

Related components

Download

Sketch UI Library