A was taking a look at Twitter Bootstrap, and, looking at the Prepended and Appended checkboxes, just cant figure out where, why and when I can use it.
Can someone give me a good example?
-
1I pinged Twitter's head of design. Let's see what he says. – dnbrv Jan 23 '12 at 17:11
as creator of Bootstrap, perhaps I can shed some light on this :). Prepended and appended inputs serve two purposes:
- Allowing for simple punctuation or units to be paired with an input. For example, if you need to indicate a field is asking for money, use the prepend with a $ sign. Other examples include @ with a username (a la Twitter.com's settings pages) and "+1" for phone number inputs.
- Condensing a common practice for toggling and editing a form value. In some cases, you might need to enable a setting and provide an open-ended value with it—this custom control allows for a more compact way to do that.
Both use cases are valid and came about as I was creating Bootstrap to help redesign internal tools at Twitter. The latter, the toggling and editing of a form value, came from an iteration of our Decider dashboard (Decider is a tool we use to turn on and off features for small groups of users). We needed a way to turn on a feature and set the % of users who would see it once enabled. Since we have so many features we can toggle on/off, we needed a very condensed way of showing this.
So, that's the gist of it. I don't use it often myself, but we felt others could stumble upon those two same use cases. Hope that helps!
By the way, feel free to hit me up on Twitter with more questions about Bootstrap as they come up—@mdo is my handle.
-
thanks man, I finally understand it. And, I like to congratulate you, Bootstrap is very simple, beautiful and usefull. Also, I was porting/adapting it to work with GWT (started some few days ago). If you like, you could take a look at my github: github.com/caarlos0/gwt-bootstrap . Thanks again for you help. – caarlos0 Jan 24 '12 at 2:49
Prepended checkboxes make sense when you are showing a list of items that need checking, or when you simply want to stick to what most people are already used to. The example below (although not great) gives you an example where I would argue a traditional prepended checkbox would be more appropriate.
The appended checkbox makes the most sense when the check is part of a form, especially in mobile forms. Here you want to keep the text portion in line with other form elements, and it therefore makes sense to use that. You can see an example from Sencha Touch's kitchen sink app below.
-
3but, in the example, is a input, not a label.. and cant understand why I will check a checkbox and write something about it... – caarlos0 Jan 23 '12 at 16:28
-
1Just because the default state is an input doesn't mean that it isn't used as a label. Take Sencha Touch for example. When you want it as a label, you disable it. – JohnGB♦ Jan 23 '12 at 17:15
Two logical uses would be for validation (making it a visual checkbox only) and making user-created checkboxes.
Validation
These could be used to show X field is valid, e.g. check the box and give a little green/blue tint to show "yep, this field is okay", and leave it blank and change an element to red and display a relevant error message if it doesn't check out. This wouldnt' be a field the user can manually check. This is usually handled by an image however not a form field.
User Created Checkboxes
Springpad is a service that includes a task list feature which uses checkboxes to let users create a check list and mark items as complete from the same form.
Google Tasks does the same thing:
The last field is an input (all of them are really) and the check boxes mark items from your list as "done".
answered Jan 23 '12 at 17:10
-
1Validation: That's usually an image not an actual user-clickable control. User-created checkboxes: If you're adding people to a mailing list or any other list, you don't need an extra checkbox to confirm their membership. A better case would be granular permissions but then you'd have multiple checkboxes arranged differently. – dnbrv Jan 23 '12 at 17:18
-
2@dnbrv I meant you'd have a user-creatable and editable list of items and an on-off control for all of them. You might have a full list of people to send something to and just only want to send to some of them, but keep all people in the list for future use or history purposes. – Ben Brocka Jan 23 '12 at 17:23
-
That's not how mailing list management is done. It's either you have a master list and options of assigning people to all specialized lists you might have or you have multiple lists and add each person as many times as necessary. – dnbrv Jan 23 '12 at 17:30
-
1Perhaps a better example would be a simple to-do list? Quickly edit in place, or check off. – Pam G Jan 23 '12 at 22:36
-
@PamG excellent idea, Springpad actually does exactly that! I'll go grab an image – Ben Brocka Jan 23 '12 at 22:45
You could use this in a custom "skills" like input. So you would type in your skills and then the checkbox would signify whether or not you want that skill to show up on your main profile, or just when someone selects view all skills.
Using it as a toggle essentially for custom input content. In this example you would use the append as you would write the content, then dictate it's further existence.
The prepend, doesn't make any sense to me.
After searching around on the Internet, I have come to the conclusion that "appended checkbox" as a term is related primarily to Twitter's Bootstrap framework. There are just 800 mentions and most of them are troubleshooting requests for jQuery scripts.
My only logical idea is that it can be used as a fail-safe for right-to-left languages in case default direction change doesn't work properly. Such a control makes no sense for left-to-right languages because the user is going to notice a text field and then the checkbox, which will confuse the user.
If you're looking for a way to use the control because it's included in the framework, stop right there. The goal of good UX is to use the appropriate elements so when an element feels useless it must be skipped/omitted/dropped/annihilated.
-
hmm, I tried to search too, and came to the same conclusion. I not searching for a way to use this control just because it is in Bootstrap, I just see it, and have no idea how to use it. Well, thanks for your answer. – caarlos0 Jan 23 '12 at 17:11
-
Knowing what elements are there and how they're to be used is certainly helpful though, and I think that's what he's asking for. – Ben Brocka Jan 23 '12 at 17:12
-
