Tell me more ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.
up vote 4 down vote favorite

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.

enter image description here

share|improve this question
Here's another, perhaps better example: megaleecher.net/uploads/iphone-vpn-configuration.png – Jason Swett Jun 12 '12 at 15:48
It's called mutually exclusive option selection apparatus. – Oliver Salzburg♦ Jun 12 '12 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 '12 at 17:29
See here for an iOS UI Catalog – bobobobo Mar 29 at 18:12

4 Answers

up vote 4 down vote accepted

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)

share|improve this answer
1  
Now 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 Jun 12 '12 at 16:27
1  
OS X reference using that name. – Daniel Beck♦ Jun 12 '12 at 17:27
up vote 2 down vote

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

share|improve this answer
up vote 1 down vote

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.

share|improve this answer
Hmm, you would seem to be the most correct so far. – Jason Swett Jun 12 '12 at 15:59
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 Jun 12 '12 at 16:24
I concur with iglvzx. – hydroparadise Jun 12 '12 at 16:24
up vote 0 down vote

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.

share|improve this answer
Yeah, I guess they're just tabs. Thanks. – Jason Swett Jun 12 '12 at 15:51
@Darth, Notice what Jason has actually circled. The tab bar is not the group of three buttons. – iglvzx Jun 12 '12 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. – Darth Android Jun 12 '12 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. – bobobobo Mar 29 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. – Darth Android Mar 29 at 21:42
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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