Skip to main contentCarbon Design System

Form

A form is a group of related input controls that allows users to provide data or configure options.

Overview

Forms are used for submitting data so be as concise as possible when designing. Keep it short. Think about each field and what value the data will provide. What do you gain by collecting this information?

Begin by asking:

  • Is this a piece of information that is valuable to us?
  • Is this a piece of information that is so valuable that it’s worth preventing the user from continuing if they choose not to provide it?

Live demo

TextInput
Modifiers
TextArea
Modifiers
Select
Modifiers
SelectItem
Modifiers

Formatting

All forms are comprised of six elements:

  • Labels: Inform users what the corresponding input fields mean.
  • Input fields: Enable users to provide information. Information can be entered through a variety of different input fields ranging from text fields, checkboxes, and many other types.
  • Helper text: Provides assistance on how to fill out a field. Helper text is optional.
  • Placeholder text: Hints at what goes into a field. Placeholder text is optional.
  • Actions: Allow users to submit a form.
  • Validation: Ensures the data submitted by the user conforms to acceptable parameters.
effective form design

Button placement

On non-modal or in-page forms, align single buttons or Secondary / Primary button groups to the left. Buttons should align with the form controls regardless of the user‘s window width.

Primary button alignment in Forms

Single button alignment in forms

Secondary / Primary button alignment in forms

Secondary / Primary button alignment in forms

Multistep forms

When the primary action implies a navigation step forward, as in a wizard, align single buttons or Secondary/Primary button groups to the right. This position conveys the “next step” intention.