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.