Should checkbox labels be to the right or the left?

  • I've got some checkboxes with text values of varying lengths (from say 5 characters up to about 60) - which is the preferred layout? Value to the left and checkbox to the right, or vice versa?

  • While Microsoft and Apple aren't explicit on this issue, Java Swing Look and Feel Guidelines explicitly state that the label/value should be to the right of the control for languages read left to right. The same applies to radio buttons.

    The ancient OSF Motif Style also explicitly says that the label is to the right of check boxes and radio buttons (pg9-133). And, while we're doing archaeology, the IBM Common User Access standards states that the label is right of a check box, but they are silent on radio buttons.

    Whatever the explicit standards, it’s pretty clear designers are expected to put the label to the right of the control. The rationale is probably what you’re intuiting. When you have a column of check boxes with labels of various lengths, this arrangement allows both the check boxes and the beginning of the labels to be aligned consistently without any big gaps between the labels and the controls, neatly side-stepping the label alignment issues that text boxes and dropdown lists have. In the dead tree world, labels are often to the right of check boxes and radio button equivalents (e.g., bubbles on optically scanned forms), so this doesn’t throw users.

    If the form is only checkboxes that makes sense, but wouldn't it be messy in a form with other controls like select lists and text fields?

  • For picking one or more choices, label to the right. This allows for easy visual scanning and let's the user's mouse/finger flow in a straight line:

    [ ] option 1
    
    [ ] this is option 2
    
    [ ] #3
    

    If the label were to the left, it'd be a bit of a mess:

    option 1 [ ] 
    
    this is option 2 [ ] 
    
    #3 [ ] 
    

    Furthermore, you will often have a 'group' label and while that can certainly be placed on top, it's often on the left:

    Pick one or more options:   [ ] option 1
    
                                [ ] this is option 2
    
                                [ ] #3
    

    Note that regardless of the positioning, the labels should be clickable as well (use proper FOR attributes). The problem is that not everyone knows this and aims for the checkbox itself, so aligning them helps.

    When there is only ONE checkbox, however--typically used for an explicit opt-in or opt-out processes, I think it's OK to put it afterwards to make it a slight bit of a task (as you really do want people to fully read the label):

    To opt in to our incessant spam emails we ask that you click this checkbox: [ ]
    

    i loved the logic!, no matter how much years the "standard" has been done, only matter what is more usable, applying it right now :D

    Your reasoning on "label to the left" is flawed since you deliberately chose not to align them. The same would be true for non-aligned checkboxes even if the text is on the right-hand side.

    @JonasByström true. You could right-align the whole lot keeping the labels to the left and still have some alignment. However, it's usually preferable to left-align labels for readability.

    DAO1, I think @JonasByström 's point is that the example is *a bit* of a strawman, in that there is more you could attempt to do if the labels *had* to go on the left, for example, by using fixed width labels (which you'd have to do for right labels anyway since they shouldn't go on forever and should have a consistent wall if they need to wrap to a newline). Here's a screenshot of what a minor improvement would look like for left bound labels. Is it perfect? No. Do I still prefer right? Probably - But give it a real contender for fair contrast.

    @KyleMit that's fair, but I'd also point out significant readability and usability flaws with each of those "labels-on-left" examples. But yes, if you *had* to, those could be options.

    The real question here is what Jon and The Donald would prefer.

  • If we ignore the possibility of right to left reading order (used in some languages), I believe that the label should always be on the right-hand side of the checkbox.

    In Windows, it is in fact impossible to put a label to the left of a checkbox, from a technical point of view. In any Windows software development environment a checkbox's label will be on the right hand side of the checkbox automatically. There is no way to change this. What some programmers will do tough is create a checkbox without a label at all, and then put a static label to the left of it as separate control. Besides being ugly it has a mayor drawback: a user can't click the label to edit the checkbox state.

    So it should always be on the right hand side of the checkbox. However... I know that some people (and I don't agree with them) feel that there is an exception: when the checkbox is part of a list of other controls. See this example:

    enter image description here

    So there are people that feel this is right because the alignment looks nicer. I don't. I think the position of the checkbox is right, but the position of the label is not correct. Do you guys see this as an exception?

    In this case I think it is better to come up with some label for the checkbox, in addition to the left label, or turn the checkbox into two radio buttons.

    I agree. Advanced options: □ Show advanced options This is the best one can do I think.

    In that image, the checkbox is more like a on-off switch than a multichoice so I think it works in that example. Apple does this in iOS.

    I would never put a lone check box without a label. If it needs to be a different control that has no label, then use a different control.

    I think that for checkboxes which are used for selection of items from the list, the labels should be placed to the right. But when checkbox is a toggle, it is OK if the labels are to the left. Or do not use checkboxes as toggles but "Yes / No" sliders.

    @styfle - your iOS screenshot link requires a login fyi.

    @jbyrd I guess a lot has changed since 2012. Thankfully, the https://9to5mac.files.wordpress.com/2011/07/screen-shot-2011-07-23-at-11-41-58-am.png" target="_blank">wayback machine had a copy. Also I uploaded a new image here as a backup.

  • The basic assumption is that you want to use the most readable option.

    One important aspect is scannability, how easy it is to get an overview without consciously considering each item in full. For this purpose it is relevant that checkboxes have a constant width. so if you align one side of the checkboxes vertically, the other side will also be aligned vertically. Text is variable width, so this can generally not be achieved without stretching the text (which can make it very hard to read). It is generally recommended to put the important words at the beginning of sentences, so for LTR text we should prioritize left alignment over right alignment.

    Another issue is proximity, how close the relevant information is together. If we put the checkboxes to the right of the label and align them vertically, they will be further away from the labels than if we put them to the left. So the answer seems to be to put them on the left side.

    On the other hand, you need to consider consistency within the form. Most form controls are not constant width, and putting them to the left of their labels can often make for an awkward flow (for example, putting the birthday input field to the left of the label), where the user has to go back and forth to scan the form. A compromise would be to use left-aligned controls only if they are all constant and equal width.

    Another thing to consider is that a set of radio buttons is equivalent to the default HTML <select> list, while checkboxes are equivalent to <select multiple="multiple">.

  • My instant answer is the that checkbox should be on the left of the label, but before answering I wanted to validate the recommendations.

    Sadly Microsoft's, Sun's and IBM's UI guidelines aren't explicit in this regard (they tend to talk about when to use checkboxes over radio button etc.) but all their examples use the control-then-label convention.

    So I'd opt for that.

    I agree with Matt for the exact same reasons he gives. Can't put it any clearer than this.

    Apple has nothing explicit either, but their examples also only feature the checkbox to the left. What's up with that?

    I'd say it depends on the positioning of the form on the page as well... I'm going to keep my eyes peeled now though, and see what other sites are doing.

    The Accessibility sites recommend the labels come after the checkbox, and use a "for" attribute.

    Toolkits usually provide a widget which forces the checkbox to be on the right of the label, so there is no guideline to write.

  • Desktop GUI Toolkits like SWT encapsulate checkboxes as a Button-widget variant, where the text-property of the button becomes the label. It'll get rendered, at least on the systems I'm aware of, on the right of the checkbox. So unlike html, you don't even have to make a choice.

  • It depends on the use of the check box.

    Selection checkboxes (e.g. in a list of items) should be 'before' the text (so, to the left in a left-to-right language like English). This lets you left-align the items and have the checkboxes still be aligned without needless whitespace. It also puts the selection mechanism near the beginning of the label--people don't tend to read the entire label, but instead scan it, and that begins at the mid-left.

    In a checklist, the check boxes should come before the text, no question. Users are looking to be taking action on the checkboxes, and are scanning as above.

    Options checkboxes, in the context of other options, might be after the label. However, in general I try to stay away from option checkboxes, because they're rather uncommunicative. Newer controls like the iPhone's slider-box are more communicative, or you could use bistate buttons, drop-downs, or other methods for giving the user more insight than a simple "checked/not checked".

  • From programmer's point of view, box should come before the text, because it's easier to align. From user's point of view, text should come first, because we 1) read what this check box is about 2) decide whether to click on it or not, in this order. So the layout should reflect the user's course of actions.

    Hi Boris, welcome to UX.stackexchange; To improve the quality of the site, users are expected to provide references or very strong arguments. Your answer seems rather subjective - could you support it using a research or a credible research?

    As a programmer, I don't know that I agree the location of the checkbox has any real bearing on difficulty in lay out.

  • Id vote for "label comes after" in LTR languages, simple, people will scan down the choices and make checks by clicking on the beginning of the label (it should be supported), or if they are less computer-savvy, look for the checkbox to click, if there are like 5 checkboxes of different label lengths, imagine the trip their hands and eyes and brains have to make from the label to the equivalent checkbox... painful! so the checkbox must be the closest possible to the label to minimize this trip

    If going with "label comes after" (which I agree with - and @Michael Zuschlag has found references for) then the LTR-vs-RTL is unimportant: "label comes *after*" :)

    Also scanability is improved *after* you've filled in the forms. You can easily see which boxes are checked. This holds true for longer lists ofcourse.

  • So for a Windows or Apple software it seems to be clear to put checkbox at left. If it is at right, to respect Gelstat principes the labels have to be align at right to have check boxes aligned verticaly. ..

    But for mobile device software checkbox at the right of labels seems better for accessibility. ..

    Have à look on SMS manager of smartphone when you want to delete some messages....

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM