Carbon Design System
Preview

Forms

Last updated Apr 14, 2026

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.

Forms

Overview

Forms are incredibly common in user interfaces. You might design a form for a user to sign up, register, configure settings, take a survey, purchase a product, or provide feedback.

Anatomy of a default form

Forms are comprised of labels, text inputs, data inputs, help text, and buttons.

Building a form

Labels

Concise labels help users understand what information is being requested.

Example of labels

Optional vs. mandatory

Forms can be labeled as optional or required depending on complexity.

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

Text inputs

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

Example of text input types

Data inputs

Selection controls and bound entry controls enable users to provide input.

Example of selection controls
Example of bound entry controls

Offering help

Tooltips, helper text, and placeholder text assist users.

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

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

Input field with helper text
Example of input field alignment
Example of placeholder text

Buttons

Use primary and secondary buttons appropriately.

Examples of in-page forms with a left-aligned primary button

Examples of in-page forms with a left-aligned primary button

Examples of progressive and dialog forms with a right-aligned primary button

Examples of progressive and dialog forms with a right-aligned primary button

Behavior

Errors and validation

Effective error messaging helps users understand problems and how to fix them.

Designing for longer forms

Use progressive disclosure, accordion forms, or multistep forms for complex forms.

Example of progressive disclosure
A multistep form with a horizontally oriented progress indicator.

A multistep form with a horizontally oriented progress indicator.

A multistep form with a vertically oriented progress indicator.

A multistep form with a vertically oriented progress indicator.

Designing a form

Spacing

Ensure sufficient spacing between form elements.

Example of form spacing

Columns

Carbon generally recommends single-column forms.

Variants

Forms may be presented as dedicated pages, side panels, or dialogs depending on the use case.

Accessibility

Every text input should have a descriptive and visible label. Forms must be tab-navigable with clear required field labels.

Related

Components: Button, Checkbox, Radio button, Text input, Toggle

Patterns: Dialogs, Notifications

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.