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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
as creator of Bootstrap, perhaps I can shed some light on this :). Prepended and appended inputs serve two purposes:
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.
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.
Two logical uses would be for validation (making it a visual checkbox only) and making user-created checkboxes.
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".
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.