New Bootstrap v5 forms

A quick look at some of the major changes coming to form controls in Bootstrap 5.

Checks


Taking a fresh pass at custom checkboxes and radios without psuedo-elements, thus replacing our previous native form control styles. By resetting the appearance, we should be able to style the inputs across Edge, Chrome, Firefox, and Safari.

Differences from v4:

These new checks and their text are aligned the same way as v4—with padding-left on the outer container. This is so any and all siblings to the <input> (like the <label>, help text, or validation feedback) is easily aligned.

Flexbox styles were originally attempted, but they're unnecessary and were abandoned early in favor of a floated <input>.

Default styles

Some additional help text could appear right here.
Indeterminate checkboxes must be toggled via JavaScript—there's no HTML attribute for this.



Without label

And without labels inside the wrapper:

Inline

Make any checkbox, radio, or switch appear "inline" with utility classes. We recommend .d-inline-block and margin utilities (e.g., .mr-3) as needed.

Sizing

Built with em units, custom checks, radios, and switches will scale to their own font-size, or their containing element's (explicit or inherited) font-size. Here we're using a modifier class to set font-size: 1.5rem on the container.

Note that you could scope the sizing to the <input> itself, but you'll need additional styles to change the indentation of the <label>'s text. Alternatively, you could set a font-size on the wrapper and then override the <label>'s font-size.

Selects


Without the .form-select, the previous .custom-select is going to become the default styling, providing a unified look across all platforms.

Default styles

Below are the default and disabled selects. Disabled styles are the same as our checks—no pointer-events and an opacity change.

Inline

Similar to the new checks, make selects inline with a modifier class: .w-auto. Selects are inline-block to begin with, so no need to change their display.

Vertical alignment may become an issue, so consider wrapping your inline form controls in some flex and margin utilities. The example below features a wrapper with .d-flex and .align-items-center, plus .mb-0 on the inline checkbox.

Sizing

Sizing should become similar to the new checks and switches as they're now built with ems. Below is the same select as above, but with an increased font-size of 1.5rem.

And making it smaller with font-size: .875rem;.

Multiple and size attributes

Adding multple or size should render the select as expected, though with (expected) limited styling of the <option>s.

File