davidbgk
/
larlet-fr-david-cache

title: In Loving Memory of Square Checkbox
url: https://tonsky.me/blog/checkbox/
hash_url: ff566a58892db07815a327802fea66d3
archive_date: 2024-01-28
og_image: https://tonsky.me/blog/checkbox/checkbox@2x.png?t=1706539628
description: History of checkboxes and radio buttons in user interfaces
favicon: https://tonsky.me/i/favicon.png
language: en_US

<p>This is a checkbox:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox@2x.png?t=1706441704">        </figure>
<p>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:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkboxes@2x.png?t=1706441704">        </figure>
<p>Different operating systems rendered them differently during their evolution:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_os_x_maverics@2x.png?t=1706441704"><figcaption>OS X Mavericks (2013)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_os_x_leopard@2x.png?t=1706441704"><figcaption>OS X Leopard (2007)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_9@2x.png?t=1706441704"><figcaption>Mac OS 9 (1999)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 7.5 (1994)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_windows_8@2x.png?t=1706441704"><figcaption>Windows 8 (2012)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_windows_7@2x.png?t=1706441704"><figcaption>Windows 7 (2009)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_windows_xp@2x.png?t=1706441704"><figcaption>Windows XP (2001)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_windows_2000@2x.png?t=1706441704"><figcaption>Windows 2000 (2000)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_windows_95@2x.png?t=1706441704"><figcaption>Windows 95 (1995)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption>        </figure>
<p>As you can see, even the checkmark wasn’t always there. But one thing remained constant: checkboxes were square.</p>
<p>Why square? Because that’s how you can tell them from radio buttons:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radiobuttons@2x.png?t=1706441704">        </figure>
<p>Their distinguishing feature is a single choice. If you select one, everything else is de-selected.</p>
<p>I’m not sure when the distinction between square/round was introduced, but it seems to already exist in the 90-s:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/turbo_pascal@2x.png?t=1706441704"><figcaption>Turbo Pascal 7.0 (1992)</figcaption>        </figure>
<figure>
<img src="https://tonsky.me/blog/checkbox/norton_commander_5@2x.png?t=1706441704"><figcaption>Norton Commander 5 (1993)</figcaption>        </figure>
<p>(Guess where <code>[x]</code> is used now? In Markdown! What a comeback, huh?)</p>
<p>And since then, every major operating system followed this tradition. From Windows 3.11:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radio_windows_3.11@2x.png?t=1706441704"><figcaption>Windows for Workgroups 3.11 (1993)</figcaption>        </figure>
<p>through Windows 95:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radio_windows_95@2x.png?t=1706441704">        </figure>
<p>to Windows 11:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radio_windows_11@2x.png?t=1706441704"><figcaption>Windows 11 (2021)</figcaption>        </figure>
<p>from Mac OS 4:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radio_mac_os_7.5@2x.png?t=1706441704"><figcaption>Mac OS 4 (1987)</figcaption>        </figure>
<p>till macOS Sonoma:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radio_macos_sonoma@2x.png?t=1706441704"><figcaption>macOS Sonoma (2023)</figcaption>        </figure>
<p>There was a brief confusion up until 1986 when Apple used rounded rectangles instead of circles:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radio_mac_os_3@2x.png?t=1706441704"><figcaption>Mac OS 3 (1986)</figcaption>        </figure>
<p>but it was quickly resolved.</p>
<p>The point is, every major OS vendor has been adhering to the convention that checkboxes are square and radio buttons are round.</p>
<p>Then the Web came. And when I say Web, I mean CSS. And when I say CSS, I mean Flash and then JavaScript.</p>
<p>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.</p>
<p>That’s why it’s common to see radio buttons containing checkmarks:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/twitter@2x.png?t=1706441704"><figcaption>Twitter (2024)</figcaption>        </figure>
<p>Or square radio buttons:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/radio_yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption>        </figure>
<p>Following the Web’s example, native apps introduced us to round checkboxes:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/telegram@2x.png?t=1706441704"><figcaption>Telegram for macOS (2024)</figcaption>        </figure>
<p>Sometimes people just don’t make distinctions anymore. For example, here the first group is single-choice, while the second one is multiple-choice:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/yandex_maps@2x.png?t=1706441704"><figcaption>Yandex Maps (2024)</figcaption>        </figure>
<p>Or here, one of those polls is single-answer, another is multiple-answer:</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/telegram_polls@2x.png?t=1706441704"><figcaption>Telegram Web (2024)</figcaption>        </figure>
<p>How are people supposed to know?</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/scooby@2x.jpg?t=1706441704">        </figure>
<p>But despite all this chaos and temptation, operating system vendors knew better. To this day, they follow THE convention: checkboxes are square, radio buttons are round.</p>
<p>Maybe it was part of their internal training. Maybe they had experienced art directors. Maybe it was just luck. I don’t know — it doesn’t really matter — but — somehow — they managed to stick to the convention.</p>
<p>Until this day.</p>
<p>Apple is the first major operating system vendor who had abandoned a four-decades-long tradition. Their new visionOS — for the first time in the history of Apple — will have round checkboxes.</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/checkbox_vision@2x.png?t=1706441704"><figcaption><a href="https://developer.apple.com/design/resources/#visionos-apps" target="_blank">Apple Design Resouces — visionOS — Library</a></figcaption>        </figure>
<p>How should we even call these? Radio checks? Check buttons?</p>
<p>Anyway, with Apple’s betrayal, I think it’s fair to say there’s no hope for this tradition to continue.</p>
<p>I therefore officially announce 2024 to be the year when the square checkbox has finally died.</p>
<figure>
<img src="https://tonsky.me/blog/checkbox/rip@2x.jpg?t=1706441704">        </figure>
<p>Kids these days will use a toggle anyway.</p>