A Radio Button is a component used to allow a user to make a single choice among a number of options (whereas Checkboxes are used for selecting multiple options). See the examples.

Detailed documentation and more examples you can find in our Bootstrap Radio Docs

Basic example

Structurally, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.

We use the sibling selector (~) for all our <input> states, like :checked or :disabled. When combined with the .form-check-label class, we can easily style the text for each item based on the <input>'s state.

Inline example

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

Toggle buttons

Toggle buttons can be grouped in a button group if needed.