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.
  • Pre-populate known values when possible, e.g. a default IP address.
  • The first required input field in a form should receive focus on presentation to a user.

Data inputs

These controls enable users to provide input on forms by selecting from a set of pre-determined options or a limited range of values. Carbon provides a variety of data input components that enable a user to make a selection. Each component was created to serve a specific use case.

Selection controls

Selection controls offer users a selection from pre-determined options. When designing, consider how many options you need to present as well as how many items the user may need to select. These considerations will determine which component to use. Common selection controls include: checkboxes, radio buttons, file uploaders, toggles, and select lists (combo box and multiselect).

Example of selection controls
Deciding what to use
ControlUsageContext
CheckboxTo select or deselect one or more choicesAgree to terms and conditions, add optional items, select all that apply
Radio buttonTo select only one option from two or more choicesPick type, shipping method, etc.
ToggleTo choose one of two or more binary optionsChanging user settings; On/off; Show/hide
File uploaderTo upload/attach a file or multiple files to a formAttaching SSl certificates; adding config files to support tickets
Combo boxTo select a single item (with type-ahead functionality from a longer listChoosing a state, country, or language preference
MultiselectTo select multiple items from a longer listAdd a product example for MultiSelect

Radio buttons:

  • Pre-select a default option for the user; if the user selects a different option the default is deselected.
  • For null options, provide a radio button with the label “None”.

Radio buttons and checkboxes:

  • Radio buttons and checkbox item text falls to the right of their controls.
  • When possible, arrange the checkbox and radio button groups vertically for better scannability.

Toggles:

  • Always label toggles with the affected attribute due to accessibility constraints; color cannot be the only indicator.
  • A standalone toggle or a checkbox can be used for a single option that a user can turn on or off.
  • Toggles are very common controls in instantly updating forms, where submission is not required.

Select lists:

  • When you have more than five options to present to the user, use a select list (combo box or multiselect), not a checkbox or a radio button.

Bound entry controls

Bound entry controls allow users to input numeric data, like dates and times (e.g. number input, date picker, and slider components). They restrict user input and rely equally on keyboard and mouse interactions. They only allow valid entries, so field validation isn’t needed.

Example of bound entry controls
Deciding what to use
ControlUsageContext
Number inputTo increase or decrease incremental valuesOrder quantities
SliderTo select one number from a numerical rangePercentages, volume, timelines, data visualization
Date pickerTo input/select a single localized date or a date range from a calendarScheduling trips, meetings, and events
Time pickerTo input time in hours/minutesScheduling meetings and travel times

Offering help

Tooltips

Tooltips can be very useful for providing additional explanation to users that may be unfamiliar with a particular form field. They can also offer rationale for what may seem like an unusual request. However, research suggests that users should not have to dig around for a tooltip to access information that’s essential for the completion of their task.

In Carbon, we use the “i” icon instead of the “?” icon because it indicates additional rather than essential information.

Tooltip appears on hover (desktop) and on click (tablet and mobile).

Tooltip appears on hover (desktop) and on click (tablet and mobile).

Do:

  • Use tooltips with the outlined “i” (info) icon.
  • Use tooltips for explanatory or added information.
  • Tooltips are microcontent; keep them concise.

Don’t:

  • Tooltips are not catchalls for content that doesn’t fit elsewhere; they must be used intentionally and very sparingly.
  • Never house essential information in a tooltip.

Helper text

Helper text appears below the input label and assists the user to provide the right information. Helper text is always available, even when the field is focused, that’s why it’s the correct choice for need-to-know information. For context or background information that is “nice to have”, use placeholder text or a tooltip.

Input field with helper text

Do:

  • Think of helper text as crucial information that is secondary to the input label.
  • Keep helper text as short and specific as possible.
  • Only use helper text when truly necessary to avoid overloading the user.

Don’t:

  • Never use helper text in place of field labels.
  • Helper text should not run longer than the input area.
Example of input field alignment

When fields appear side-by-side and one input has helper text while the other one doesn’t; always top align the input fields, not the labels.

Placeholder text

Placeholder text provides hints or examples of what to enter (e.g. YYYY-MM-DD). Since placeholder text disappears once the user begins to input data, it should not contain crucial information. When the requested input may be unfamiliar to the user or formatting is in question, use placeholder text.

Example of placeholder text

Do:

  • Keep hints as short as possible and never overrun the input field.
  • Properly anonymize examples rather than using real values.

Don’t:

  • Use placeholder text to communicate complex and lengthy requirements like password requirements. Instead, use an infotip.
  • Provide placeholder text when it isn’t necessary.
  • Ever use placeholder text as a replacement for field labels.

Default values

Default values can be set for for all types of inputs. Ensure that if a default value is provided, it is something that would commonly be used anyway and would not cause disruption or errors if the user forgets or opts not to make any changes to it before submitting the form. Good default values reduce cognitive load.

For example:

  • If you can detect or determine where your users are from, have their country pre-selected in a “Country” dropdown.
  • If there is a common or minimum value (i.e., a quota or memory limit), pre-fill that value.
  • If a text input can be detected or determined in advance (i.e.-company name), pre-fill that value.
  • If a start date is required, use the current date as the default.

Buttons

Use a primary button for the main action, a secondary button for secondary actions like Cancel or Discard.

Button alignment

Alignment refers to whether the buttons are aligned to the right or the left of the container or layout. Button alignment depends on the type of form that you are building. We’ll touch on alignment briefly here as it relates to the button component and offer more detailed information about form variations below.

Margins vs. full bleed

In side panels, dialogs, and any other forms within tiles, the button group should span the width of the container and buttons should bleed to the bottom edge. If the button content is too long for this arrangement, stack buttons vertically (with primary button on the bottom) and maintain their margin and padding. See button usage guidance for more information.

AlignmentBleedUse case
Left-alignedNoNon-dialog, in-page forms
Right-alignedNoMultistep forms/wizards when the primary action implies a navigation step forward
Full-widthYesAll forms that are presented in dialogs and side panels and in some cases, forms within a tile

Button emphasis

Emphasis refers to the position of the primary button in relation to secondary and tertiary actions. When using multiple buttons, the primary button appears to the right and any secondary buttons appear to the left. Research has shown that performance differences between secondary and primary button placement are negligible, however maintaining consistency throughout a product, offering, or platform is crucial. The Secondary / Primary button order (secondary to the left and primary to the right) is therefore our required guidance and should be followed at all times.

Example of dedicated page forms

Example of dedicated page forms