I understand that they shouldn't be square to avoid confusion with checkboxes and that today they should be circle for consistency, but why were they originally chosen to be circular? I've never seen a radio with pop buttons (that radio buttons are named after) with circular buttons, always rectangular. Is there any affordance that a circle offers that another shape or designation lacks?

It seems to me that if you want to invoke the metaphor of this, the buttons should be rectangular. Car radio with mutually exclusive buttons

  • 35
    Many radios from the 70s in particular (e.g this one) had round radio buttons. The AFC button was almost certainly an independent on/off, but the FM/LW/MW buttons would be mutually exclusive. – TripeHound Apr 19 '17 at 18:31
  • 9
    There was a UI toolkit for Windows in the early to mid-1990s that had diamond-shaped radio buttons, though I'm struggling to identify it. – Dai Apr 19 '17 at 20:27
  • 15
    @Dai Not just Windows. Motif (a UI toolkit for X-Windows) had diamond shaped radio buttons, at least until it evolved to become CDE/Motif. – VGR Apr 19 '17 at 21:10
  • 12
    @Dai Early versions of "Chicago" (what would become Windows 95) had diamond-shaped radio buttons, as seen here. – Random832 Apr 20 '17 at 3:22
  • 11
    Surely the answer has little to do with radios, and everything to do with tick-boxes being square. This means a user can tell them apart before clicking on any of them. – nigel222 Apr 20 '17 at 7:45

11 Answers 11

up vote 121 down vote accepted

Square was easy

The earliest appearance of circular radio buttons that I can find is in Apple Macintosh System 4 (1987). Prior to that Mac OS used squares with beveled corners, which was probably just computationally easier to draw and better-looking on non-anti-aliased low resolution screens of the time. The general favoring of rectilinear shapes was dictated by the primitive graphics.

If not square then…

I don’t know of any source providing a reason for going with circular, but chances are square was the obvious choice for the checkbox, as they often appear square on paper forms, so designers picked the most obvious non-square shape.

Rectangular could look too much like a command button. It's vital not to mistake a command button for a radio button because a command button activates (possibly irreversibly) something immediately. You want to signal to the users that they're making a commitment of sorts. Radio buttons typically don't take effect until the user clicks the dialog's OK command button.

So if not square or rectangular, then what? Triangular? Hexagonal? Motif and IRIX used diamond-shaped radio buttons, which I’d rank as the next-most-obvious non-square shape.

Your radios may vary

You say that circular is incompatible with the radio button metaphor, but that’s not necessarily true. There were some car radios with circular buttons, which may have been the inspiration. Personally, I doubt it. I believe such radios date primarily from the 1950s-1960s, not the 1980s when these GUIs were designed. There are rectangular toggling buttons in GUIs that more accurately mimic common car radios from the 1980s, if you’re interested in invoking that metaphor.

Real answer: Users weren’t expected to see it as a radio

Actually, the radio button metaphor is a geek thing, not a user thing. Users were not supposed to make the connection to car radios. The Apple Publications Style Guide of 2006 advises tech writers to “Use radio button only in developer documentation; use button in user documentation” (p127). Up until Windows XP, MS referred to radio buttons as “options buttons.” It’s only important that they look like buttons of some sort, which are often circular, and almost never diamond or triangular.

A paper form metaphor?

Despite the presence of “buttons,” GUIs, including dialog boxes, owe most of their visual design to a paper-and-desktop metaphor, rather than a control-panel metaphor. They're basically virtual forms to fill out. Text boxes and check boxes obviously come from paper forms. Perhaps circular radio buttons were inspired by optical scan sheets, where a person fills in small circles or ovals with a Number 2 pencil. On such sheets (such as used for SAT tests), the users should only pick one choice in a set, so that’s an apt metaphor. That would also explain why radio buttons are small (smaller than command buttons) and turn black (in most UIs) when selected. That’s what I tell users as a mnemonic anyway.

  • 7
    Answers like this and I think there should be a UX stack exchange blog/wiki site where a lot of information can go and stay for references. – Harshal Apr 20 '17 at 4:50
  • 13
    Computationally easier to draw? No. Circles are indeed difficult to draw, compared to rectangles, but they're actually easier to draw than rectangles with rounded corners. The real reason that the Mac used "squares with rounded corners" is discussed here. It wasn't a technical limitation, and didn't have anything to do with resolution. – Cody Gray Apr 20 '17 at 6:51
  • 10
    "fills in small circles or ovals with a Number 2 pencil": Number 2 is the vital part. – Angew Apr 20 '17 at 10:03
  • 8
    Hmm. I never actually made the connection between Radio Buttons and car radios, and I've been programming since the Apple IIe. I always thought the name came from "Radial", as in "round". – Bradley Uffner Apr 20 '17 at 14:37
  • 8
    @BradleyUffner – eyebrows out of bounds, system halted – user67695 Apr 20 '17 at 19:59

This is a very interesting question. Radio buttons were first introduced with the Xerox Star 8010 and I believe they looked like the rectangular selectors in the screenshot below:

I can't provide a citation on this, but I'm assuming that there was originally no visual distinction between components like radio buttons and other selectors like tabs or checkboxes. Somewhere along the implementation of radio buttons (whether it was in Apple Lisa, Apple Macintosh, Atari ST, or Commodore Amiga) this visual distinction was probably made to improve UX. As to why they're circular; it was probably a fairly arbitrary design choice that simply caught on.

  • 5
    Yeah, I'd assume it's to distinguish them from checkboxes too, but haven't seen any evidence either way. – JonW Apr 19 '17 at 16:06
  • It's quite possible they were rectangular just because they're easier/quicker to render on limited hardware. – TripeHound Apr 19 '17 at 18:34
  • 1
    @TripeHound I would agree with you, but remember that radio buttons were introduced in the OS in the image I posted. There appear to be rounded buttons in the top bar, so this is probably not that case. – William Anderson Apr 19 '17 at 18:48
  • That's cool, I don't remember having seen that, but I implemented essentially the same control last year (as a listbox style in WPF) for our claims processing application and everybody loves it. – Ed Plunkett Apr 19 '17 at 20:33
  • 1
    Apple Lisa apparently used a slightly different style, more in line with the modern round radio buttons but square (or near-square) instead of round. See toastytech.com/guis/lisadark.png from toastytech.com/guis/lisa2.html and toastytech.com/guis/lisaos1Preferences_Large.jpg from toastytech.com/guis/lisaos1LisaTour.html It also apparently used them for something that much later became known as "tabs". – a CVn Apr 20 '17 at 5:37

Apparently I am the only one who thinks round radio buttons are natural because they were that way on my dad's radio back then...

It was a popular design from german manufacturer Grundig and possibly a few others. A couple of examples:

Note that on those pictures, some of those buttons are just regular on/off buttons, while others are actual "radio buttons" (the FM / AM buttons on the second picture for instance). Can't find a picture of my dad's radio, but I distinctly remember it having several round "radio buttons".

Circular radio buttons were never meant to visually resemble physical car radio buttons.

The name is a reference to behavior rather than appearance, and these buttons do behave very much like automotive radio buttons popular prior to the mid-1990's. (When making a new selection, the previous selection is visibly undone.)

From a visual perspective, they were probably originally intended to make sense next to checkboxes on a pencil-and-paper form.

They may very well be inspired by Optical answer sheets such as those using Scantron technology, which have been in use since the mid-1970's. On these forms, the user is typically expected to fill in a circle with a pencil, and multiple answers in the same set are forbidden.

  • That would however not explain their name. (I associate radio buttons with round knobs, but mostly on old TV sets. The ones you had to stick matches in to make them stick in position) – eckes Apr 21 '17 at 14:36
  • 8
    @eckes You're correct, because I'm positing that the name has nothing to do whatsoever with how they look at all, the name is a reference to how they behave only. And they behave quite similar to programmable automotive radio buttons prior to about the mid 1990's, where pressing one causes the previously selected one to pop out. – Kevin Laity Apr 21 '17 at 17:34
  • 2
    @KevinLaity you should include that in your answer. That seems like a very plausible reason for calling them radio buttons -- especially considering that a car radio's mechanical buttons would have been nearly ubiquitous around the time the UI element was developed and entered widespread use, but had not yet been supplanted by digital selectors that involved no button-popping-out. – Doktor J Apr 21 '17 at 17:59
  • @eckes I thought I did include that in my answer, I'll edit to clarify – Kevin Laity Apr 21 '17 at 20:04
  • The radio button behaviour is the critical link. In (normal) use there can only be one depressed radio button. The special case in no buttons depressed. A (well made) radio will not allow multiple buttons to be depressed. These functions are the logic of buttons on radios and of radio buttons on user interfaces. Mark reading forms may look similar but they allow for marking all apropriate correct answers, this is a checkbox logic. All-up buttons on a radio is an unselected state and is mirrored correctly in radio buttons and can be used to prevent advancement, no-station=form-error. – KalleMP Apr 26 '17 at 8:01

As a kid, I had this (then already old) radio receiver. The five smaller buttons are the preset buttons. The buttons are not just buttons, they're knobs. Each is a small tuner, to tune that preset.

Philips 702 receiver preset buttons

When one button is pressed, the other buttons pops up again, so only one button can be pressed at a time, as you can listen to only one station at a time.

I can imagine the radio buttons having been based on this type of button.

  • This isn't the true origin according to the other answers, but +1 anyway for including a great original image to illustrate this. – Wildcard Apr 24 '17 at 9:01

I don't know if this counts as an answer, because it is only my opinion.

I thought about that same question some time ago and I realized that circles, as opposed to boxes, can not be stacked. So, you can only select one. In other words, radio buttons are unstackable checkboxes (if that even makes sense).

As far as I know, this particular decision dates back to Windows 1.0 (late 1985):

enter image description here

I doubt that it was visually intended to be particularly similar to any specific radio, or anything like that.

It was a simple matter of having two different kinds of "things" to display: one that allowed you to choose only one item out of a group, and another that allowed you to choose multiple items from the group. They wanted a visual distinction between the two.

The low-resolution screens of the day dictated that:

  1. they couldn't take up much space
  2. the difference couldn't be subtle
  3. enough people used monochrome monitors that it couldn't be based on color

That seems to have led Microsoft pretty directly to circle for one, and square for the other (and Apple copied followed their lead a few years later). As far as I know, the choice of which would use the circle and which the square was fairly arbitrary.

It's possible that some other windowing system did this earlier, but I haven't been able to find any evidence of it.

X was originally released a bit before Windows (June of 1985, vs. November for Windows), but under the "mechanism, not policy" philosophy, I don't think it provided actual controls, so it would have been up to an individual developer to do things like this. X was based on an earlier system named W, but it apparently followed roughly the same ideas as X (as far as UX goes--the implementation was quite different).

DR GEM also predates Windows, but all the early examples I've been able to find from it seem to follow (roughly) with the Xerox convention of something that looked like a normal button, but stayed shaded to indicate it was selected.

My opinion:

  1. The Mac popularized circular radio buttons.
  2. Checkboxes obviously should be boxes.
  3. The other shape that QuickDraw could draw was circles, therefore the other type of control (radio buttons) became circular.
  • 6
    Quite a compelling answer! But it is lacking the sentimental stories and photos of vintage radios for 'completeness' ;) – uhoh Apr 24 '17 at 3:07

If clicking a control will have no effect other than to add or remove a checkmark (or X) from the control itself, then it makes sense to describe the control as a "box" [checkbox]. By contrast, if the control can affect the state of other elements on the form (as with an exclusive-selection control) it makes more sense to refer to it as a "button". While both styles of control may have initially been square, having them be different shapes offered a useful visual distinction. While "boxes" are generally box-shaped (i.e. rectangular), "buttons" are often round. Thus, if one type of control had to have its shape changed, making the selection buttons round would make more sense than making the "check boxes" something other than box-shaped.

  • Downvote reason? – user67695 Apr 21 '17 at 13:33
  • @nocomprende, I didn't downvote, but it doesn't seem like it really answers the question. And it puts the cart before the horse. They're called buttons because they are round, maybe, but they're definitely not made round because the name is "button." Most UI buttons these days are rectangular, anyway. – Wildcard Apr 24 '17 at 9:02
  • 1
    @Wildcard: In the days before 3d shading, the Lisa/Macintosh used rounded corners to mark buttons as buttons. If something had rounded corners and a reverse-video top it was a desk accessory; if it had rounded corners and didn't have a reverse-video top it was a button. Warning icons were triangular, stop icons were octagonal, and pretty much everything else had square corners. The exclusive-select buttons were too small to have meaningful straight sides along with rounded corners, so they degenerated into circles. – supercat Apr 24 '17 at 15:00

In WinForms, radio button controls can still be styled as rectangles and contain the text within, as opposed to next to the tiny circle. And they'll essentially look like a regular button. As you can see, they're quite similar:

This is just a demo, but you can imagine scenarios where using button-looking non-buttons could cause confusion, especially for users who are not very experienced with computers (because "buttons always change the window" or some other wrong idea which the users may have invented on their own).

In real life we're limited by physicality, but in digital GUI we can make these radio buttons look nicer and their function more distinct from normal buttons by styling them as a circle with text next to it.

At least that's how I understand the reasoning behind this design.

  • Not exclusively a WinForms thing. This is part of the Windows operating system's native controls (built into the USER library), and has been there for a very long time. The button, check box, radio button, and group box controls are actually all the same control class under the hood: BUTTON. UI frameworks like WinForms hide most of this from you, treating them as entirely separate controls, but they are really just different drawing styles for the same control. – Cody Gray Apr 22 '17 at 16:56
  • 1
    Surely we could go into implementation details of these controls in .Net framework, but that's not what's important here. – user1306322 Apr 22 '17 at 17:10
  • I think the radio buttons in Windows look somewhat similar to LED indicator lights found on various panels. Those are usually round. – joeytwiddle Apr 26 '17 at 7:07
  • @joeytwiddle and what about in MacOS? And would you mind explaining why only Windows and not all other OSs? AFAIK they all look pretty much the same everywhere. – user1306322 Apr 26 '17 at 8:34

Radio button means we have to select something out of many options.So if it is circle one then we can easily select it with key up or down arrow.The main motive is to remove conflicts between radio and checkbox they have made it circle.

  • 17
    But why specifically a "circle" and not some other shape or interface element - that is what the OP appears to be asking. (?) – MrWhite Apr 20 '17 at 8:05
  • 3
    “if it is circle one then we can easily select it with key up or down arrow” — I suspect we could still do that even if they were a square, or a triangle, or indeed any other shape. – Paul D. Waite Apr 21 '17 at 19:55

protected by 4rchit3ct Apr 24 '17 at 6:27

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.