What is this kind of UI component called? I think it makes more sense in certain cases than a set of radio buttons and I'd like to create a similar component for a web app I'm developing. I just want to know what it's called in case someone out there has created some nice JavaScript way to implement this sort of component. Right now I wouldn't know what to search for, though.
-
Here's another, perhaps better example: megaleecher.net/uploads/iphone-vpn-configuration.png– Jason SwettJun 12, 2012 at 15:48
-
It's called mutually exclusive option selection apparatus.– Oliver SalzburgJun 12, 2012 at 16:14
-
The referenced screenshot is iOS, but the same control exists on OS X as well (see my comment to accepted answer), so it's not off topic, despite the tagging and description.– Daniel Beck ♦Jun 12, 2012 at 17:29
-
See here for an iOS UI Catalog– boboboboMar 29, 2013 at 18:12
4 Answers
Don't think there is a standard name.
It looks similar to what apple call a segmented control.
(See http://idevrecipes.com/category/uisegmentedcontrol/ for a picture)
-
1Now YOU seem to be the most correct so far. And this is the first answer that I can plug into Google Image Search and have most of the results be the actual thing I was originally talking about. Jun 12, 2012 at 16:27
-
1
iglvzx is right. In fact, it resembles closely the type of car radio buttons from which the name for the UI components was derived
Similar to a radio button, there is also a GUI component known as a toggle button. Both types of buttons can be added to a button group so only one button in the group can be selected at a time. This is in contrast to a tab, which is attached to a panel.
-
-
Why does it have to be visually attached to a panel for it be considered a tab? It behaves the exact same, does it not? Jun 12, 2012 at 16:24
-
I would call that a tab bar, simply styled to fit into the rest of the application UI. All of the tabs generally have the same data presented in different ways, but it's still just a group of views which are changed out based on a tab selection.
-
@Darth, Notice what Jason has actually circled. The tab bar is not the group of three buttons.– iglvzxJun 12, 2012 at 15:59
-
1@iglvzx I would call both a tab bar - While I agree with your answer on how it's technically constructed, on a more abstract level the use of toggle-able GUI elements, of which only one may be selected, and the selection of one changes the content of another component on the interface is a tab component, regardless of whether it's constructed from radio buttons or toggle buttons or if the tabs appear connected to the buttons. Here is a better example of what I meant to link. Jun 12, 2012 at 16:22
-
No, the tab bar is like what is at the bottom of iTunes. Although they're functionally kind of equivalent (in the sense that they're basically radio buttons), the tab bar is meant to switch out an entire screen, while the segmented control usually chooses something, without changing the screen.– boboboboMar 29, 2013 at 17:51
-
@bobobobo Uh, the segmented control at the bottom of the calendar app (as shown in the picture in the question).... changes out the entire screen. Mar 29, 2013 at 21:42
-
Ok, but it is still not a tab bar -- see the iOS UI catalog (search for "tab bar", then search for "segmented control")– boboboboMar 31, 2013 at 0:33