4
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.
Jason Swett
Posted 2012-06-12T15:44:11.623
Reputation: 319
4
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)
sgmoore
Posted 2012-06-12T15:44:11.623
Reputation: 5 961
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. – Jason Swett – 2012-06-12T16:27:37.410
1OS X reference using that name. – Daniel Beck – 2012-06-12T17:27:53.903
2
iglvzx is right. In fact, it resembles closely the type of car radio buttons from which the name for the UI components was derived
Why Radio Button is called a Radio Button | knowAhead
barrel
Posted 2012-06-12T15:44:11.623
Reputation: 121
1
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.
iglvzx
Posted 2012-06-12T15:44:11.623
Reputation: 21 611
Hmm, you would seem to be the most correct so far. – Jason Swett – 2012-06-12T15:59:15.770
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? – Darth Android – 2012-06-12T16:24:26.490
I concur with iglvzx. – Chad Harrison – 2012-06-12T16:24:53.473
0
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 Android
Posted 2012-06-12T15:44:11.623
Reputation: 35 133
@Darth, Notice what Jason has actually circled. The tab bar is not the group of three buttons. – iglvzx – 2012-06-12T15:59:22.340
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.
– Darth Android – 2012-06-12T16:22:25.717No, 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.
– bobobobo – 2013-03-29T17:51:09.397@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. – Darth Android – 2013-03-29T21:42:34.843
Ok, but it is still not a tab bar -- see the iOS UI catalog (search for "tab bar", then search for "segmented control")
– bobobobo – 2013-03-31T00:33:46.000
Here's another, perhaps better example: http://www.megaleecher.net/uploads/iphone-vpn-configuration.png
– Jason Swett – 2012-06-12T15:48:52.693It's called mutually exclusive option selection apparatus. – Der Hochstapler – 2012-06-12T16:14:03.317
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 – 2012-06-12T17:29:08.533
See here for an iOS UI Catalog
– bobobobo – 2013-03-29T18:12:21.110