Checkboxes & Radios

What are checkboxes and radio buttons?

Checkboxes let users select any number of options, or toggle a single setting such as "I agree to the terms". Radio buttons let users choose exactly one option from a group. Custom checkbox and radio controls restyle the native inputs with brand colours, larger hit areas, card-style options or icons, while keeping their built-in behaviour.

When to use which

• Checkbox for independent options and multi-select lists such as filters or permissions.
• Radio group for one choice among a few visible options, such as shipping method or plan.
• Radio cards when each option needs a description or price.
• Use a switch instead of a checkbox when the change takes effect immediately.

Best practices

• Keep the native <input type="checkbox"> or type="radio" in the markup and style it; do not replace it with divs. Modern CSS supports appearance: none and accent-color for this.
• Wrap or associate each input with a <label> so the text is clickable and the target is large.
• Group related options in a <fieldset> with a <legend> describing the question.
• Radio groups use arrow keys to move between options; native radios handle this for you.
• Make checked, unchecked, focused, disabled and indeterminate states clearly different, not by colour alone.
• Keep focus outlines visible on custom controls with :focus-visible.
• For card-style options, make the whole card the label and show the selected state with a border and a checkmark.

Framework versions

This category includes custom checkbox CSS, radio button groups, option cards and checkbox lists. Bootstrap 6 versions use theme-* colour roles for the checked state. Bootstrap 5 versions build on .form-check, .form-check-input and .btn-check, Tailwind CSS versions use utilities with peer and checked: variants, and pure CSS versions show accessible styling with only native inputs. Preview them live, copy the HTML and CSS, and drop them into your forms.