Skip to main contentCarbon Design System

Forms

A form is a group of related input controls that allows users to provide data or configure options. Forms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation.

Overview

When to use

Forms are incredibly common in user interfaces and their design and usage continues to evolve as input methods get smarter and more and more people use mobile and tablet devices. You might design a form for a user to:

  • Sign up for / log into an account
  • Register for a service
  • Reconfigure settings, (e.g. enabling notifications)
  • Take a survey
  • Purchase a product
  • Provide feedback

Respect the user

Forms are meant to gather information and guide people with as little fuss as possible. To allow users to scan and complete the form quickly, forms should:

  • Respect the user’s GDPR and other privacy regulations by only asking for information that is absolutely necessary.
  • Group related tasks under section titles to provide more context and make the interface easier to scan.
  • Follow a logical, predictable order—e.g first name first, last name second.
  • Allow users to stay with a single interaction method for as long as possible (i.e. do not make users shift from keyboard to mouse numerous times in a single form).
  • When designing be mindful of password managers and browser capabilities that populate data for users.
  • Progressively disclose additional inputs only as they become relevant; see the Designing for longer forms section below.

Anatomy of a form

Forms are comprised of some or all of the following elements.

Basic form with anatomy callouts
  1. Labels: Input labels helps users understand what the corresponding inputs mean.
  2. Text inputs: Enable users to input free-form text.
  3. Data inputs: Information can be entered through a variety of non-free form input fields as well, (e.g. checkboxes, radio buttons, dropdowns and selects, file uploader, date pickers, toggles, etc.) Visit the individual component pages for in depth details of their specific states and visuals.
  4. Help: Provides in-context guidance like tooltips, placeholder text, or helper text, to assist the user in providing the right information.
  5. Buttons: Allows users to submit or exit a form.

Building a form

Labels

Concise labels for text and data inputs help users understand what information is being requested of them.

  • Use sentence-style capitalization for all text elements, except for product names and proper nouns. Sentence-style means only the first word of each sentence is capitalized.
  • Although they may be formatted differently, all input components need labels.
  • Labels should clearly state the required input.
  • Do not use colons after label names.
  • Labels are not helper text; be succinct. Use one to three words only.
Example of labels

Top-aligned labels

Top-aligned labels are Carbon’s default (vs. left-aligned labels) and the only label arrangement currently offered. Top-aligned labels provide a consistent left edge, a close proximity between label and input, and are good for scannability and quick form completion.

Advantages:

  • Top-alignment enables quick completion.
  • The label length has room to extend or vary, (e.g. other languages).
  • When users are entering familiar content and are less likely to make data entry errors, top-alignment is ideal.
  • This arrangement is best when fewer form fields need to be presented.

Optional vs. mandatory

Forms items can be labeled as either optional or required depending on several factors. A common distinction in IBM products for using required or optional is the forms complexity.

  1. Simple forms - generally shorter and/or user- or consumer-oriented; such as sign-up and contact forms and checkout screens. Most of the fields will tend to be required.
  2. Complex forms - generally longer and product-oriented; contain properties and settings that are used to configure Enterprise software.  Although they will usually contain at least one required field, the majority of the fields will tend to be optional.

Note if the majority of the fields are required or optional, as the overall number of form fields for your entire product should inform your treatment. The pattern used should be consistent throughout your product, or at minimum, consistent between all of the same types of form within your product.

  • If the majority of the fields are required, mark only the optional field labels with (optional).
  • If the majority of the fields are optional, mark only the required field labels with (required).

When designing your form, consider the purpose and the use case to reduce visual noise and clutter to allow your user to better complete their task. This will also ensure consistency through and across products.

An excess of optional fields should be avoided. If it’s necessary to have a large number of optional fields, we recommend devoting an entire section to optional fields to avoid excessive repetition.

Example of a short user sign-up form using the optional pattern

Example of a short user sign-up form using the optional pattern

Example of product configuration properties using the required pattern

Example of product configuration properties using the required pattern

When to use


Do mark fields (required) when the majority of the fields are optional.

DO mark fields (required) when the majority of the fields are optional.

Don't mark fields (optional) when the majority of the fields are optional.

DON'T mark fields (optional) when the majority of the fields are optional.

Best practices

  • Consider the overall number of required and optional fields in the forms for your entire product. The pattern used should be consistent throughout your product, or at minimum consistent between all of the same type of form within your product.
    • For example, if you have 100 types of connections properties forms and the fields are optional in 85 of the 100 forms, all 100 should use the required pattern.
  • Use the techniques illustrated below in the Default Values and Designing for Longer Forms sections in order to make your forms easier and more efficient to use.

Text inputs

Free-form text inputs are the most commonly used components in forms.

Example of text input types
Deciding what to use
ControlUsageContext
Text inputTo capture several words maximumNames; phone numbers; addresses
PasswordTo collect private data by hiding the charactersPasswords, Social Security Numbers (SSN), PINs, credit card information
Text areaTo capture multiple lines of textFeedback; support requests

Best practices

  • The field widths should reflect the intended length of the content while still aligning to the responsive column or mini unit grid.
  • Make sure users can enter their information at smaller screen sizes.
  • Truncate when an input is too long to be fully displayed in the field.