Movatterモバイル変換

Checkboxes can utilize the:indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Add thedisabled attribute and the associated<label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Add thedisabled attribute and the associated<label>s are automatically styled to match with a lighter color to help indicate the input’s state.

A switch has the markup of a custom checkbox but uses the.form-switch class to render a toggle switch. Switches also support thedisabled attribute.

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with.form-check.

Group checkboxes or radios on the same horizontal row by adding.form-check-inline to any.form-check.

Omit the wrapping.form-check for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, usingaria-label). See theforms overview accessibility section for details.

Create button-like checkboxes and radio buttons by using.btn styles rather than.form-check-label on the<label> elements. These toggle buttons can further be grouped in abutton group if needed.

Checkbox toggle buttons

Outlined styles

Different variants of.btn, such at the various outlined styles, are supported.