This is a checkbox:

It’s square, it has a checkmark inside, and its distinguishing feature is that you can select any number of them at the same time:

Different operating systems rendered them differently during their evolution:

macOS Sonoma (2023)

OS X Mavericks (2013)

OS X Leopard (2007)

Mac OS 9 (1999)

Mac OS 7.5 (1994)

Windows 11 (2021)

Windows 8 (2012)

Windows 7 (2009)

Windows XP (2001)

Windows 2000 (2000)

Windows 95 (1995)

Windows for Workgroups 3.11 (1993)
As you can see, even the checkmark wasn’t always there. But one thing remained constant: checkboxes were square.

Why square? Because that’s how you can tell them from radio buttons:

Their distinguishing feature is a single choice. If you select one, everything else is de-selected.

I’m not sure when the distinction between square/round was introduced, but it seems to already exist in the 90-s:

Turbo Pascal 7.0 (1992)

Norton Commander 5 (1993)
(Guess where [x] is used now? In Markdown! What a comeback, huh?)

And since then, every major operating system followed this tradition. From Windows 3.11:

Windows for Workgroups 3.11 (1993)
through Windows 95:

to Windows 11:

Windows 11 (2021)
from Mac OS 4:

System 4 (1987)
till macOS Sonoma:

macOS Sonoma (2023)
There was a brief confusion up until 1986 when Apple used rounded rectangles instead of circles:

System 3 (1986)
but it was quickly resolved.

The point is, every major OS vendor has been adhering to the convention that checkboxes are square and radio buttons are round.

Then the Web came. And when I say Web, I mean CSS. And when I say CSS, I mean Flash and then JavaScript.

You see, people on the Web think conventions are boring. That regular controls need to be reinvented and redesigned. They don’t believe there are any norms.

That’s why it’s common to see radio buttons containing checkmarks:

Twitter (2024)
Or square radio buttons:

Yandex Maps (2024)
Following the Web’s example, native apps introduced us to round checkboxes:

Telegram for macOS (2024)
Sometimes people just don’t make distinctions anymore. For example, here the first group is single-choice, while the second one is multiple-choice:

Read More