skip to main content

Accessible Material forms implementation in Bootstrap 5.3.0

  • Swap the input and label order. Bootstrap's documentation has the label placed before the input. To make it work correctly, ensure the input comes first, followed by the label.
  • Ensure the placeholder is left empty.
  • Surround your form inputs with the .material-form class.
  • Enclose each form input with a .material-form-group.

Below is an example of a form with all of the inputs you would possibly need. The markup is accessible. A great place to start and refer back to as reference when building forms. Docs for material design text field component.

Material form example

An example of adding helper text underneath the input
Switch Checkbox
Radio example
Inline radio example
Checkboxes example
Inline checkboxes example

Bootstrap form example

An example of adding helper text underneath the input
Switch Checkbox
Radio example
Inline radio example
Checkboxes example
Inline checkboxes example