đź“»

Radio Buttons vs Checkboxes

Radio and checkbox inputs are a fundamental part of modern web forms. By understanding how users perceive them, designers can create better user experiences.

Checkboxes and radio controls are a type of input element used to make a choice between several options. These controls are often used in online forms where their actual meaning may be unclear yet they may trigger a distinctive interpretation.

Checkboxes are a type of HTML input element used to select multiple options. They can be seen as square boxes for checking the presented options. Checklists for example, known for splitting a complex goal into simple steps, use this exact pattern.

Radio buttons on the other hand are used when one option is required out of many options. The name "radio Buttons" comes from the physical buttons used on older radios. Whenever one button was pressed the previously selected one popped out, leaving only a single pressed button at a time.

“one material should not be used as a substitute for another, otherwise the end result is deceptive” by Jeremy Keith (Resilient Web Design)

Both element have been designed with a real life equivalent in mind to make their usage simple and familiar. That’s why checkboxes are square and radio buttons are round. Their appearance is not just visual, but indicates what can be expected of them. Making a round checkbox would be like naming the "push" side of a door "pull".

Evidence and further readings

Here you can find a list of references to dive deeper on the subject.