Checkboxes and Radios
Checkboxes represent independent choices, while radio controls represent one selection from a group.
Core concept
Explain form-check, form-check-input, form-check-label, checked, disabled, inline controls, and form-switch. Show why radio buttons in one group need the same name attribute.
Using it in a real interface
Build notification preferences with checkboxes and a payment method choice using radios. Explain why the two controls communicate different data models.
Implementation notes
Never use a checkbox when exactly one option must be selected. Conversely, do not use radios when users may legitimately choose several independent options.
ADVERTISEMENT