On this page

Forms

DXP Design System supports all of Bootstrap's default form styling in addition to a handful of new input types and features. Please read the official documentation for a full list of options from Bootstrap's core library.

On this page

Validation

Indicate invalid and valid form fields with .is-invalid and .is-valid classes.

First name help text.
Looks good!
Last name help text.
Looks good!
City help text.
Please provide a valid city.
State help text.
Please provide a valid state.

Checkboxes and Radio Buttons Acquia Design System only

Checkboxes

Disabled Checkboxes

Radio Buttons

Disabled Radio Buttons

Indeterminate Checkboxes Acquia Design System only

Inline Forms Acquia Design System only

Switch

Replaces a standard checkbox input with a toggle switch.

Do:

  • Include a clear label for the enabled and disabled states
  • Indicate whether the setting is enabled or disabled and give users an understanding of what the setting will control
  • Show when a setting or feature is disabled and why

Don't:

  • Use unclear or misleading language

Drag and drop Acquia Design System only

Drag and drop file uploads.

Do:

  • Provide feedback once file(s) have been dropped and uploading begins

Don't:

  • Use unclear or misleading language for success and error messages
Drop files here

File: sample.zip
Uploading and validating configset.
This may take a few minutes.

File: sample.zip
Configset upload failed.
Try uploading a different file.

Please select a zip file