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?

12 Answers 12


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.

  • 6
    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?
    – l0b0
    Dec 12, 2012 at 12:16

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 Dec 30, 2014 at 8:43
  • 1
    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. Sep 1, 2016 at 12:20
  • @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.
    – DA01
    Sep 1, 2016 at 16:16
  • 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
    Mar 23, 2017 at 15:38
  • @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.
    – DA01
    Mar 23, 2017 at 15:59

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?

  • 5
    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. Aug 3, 2011 at 17:10
  • 2
    I agree. Advanced options: □ Show advanced options This is the best one can do I think. Aug 5, 2011 at 11:50
  • 1
    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.
    – styfle
    Jul 13, 2012 at 6:46
  • 1
    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.
    – Chris Calo
    Oct 26, 2012 at 0:31
  • 2
    @jbyrd I guess a lot has changed since 2012. Thankfully, the wayback machine had a copy. Also I uploaded a new image here as a backup.
    – styfle
    Oct 10, 2018 at 14:40

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.
    – Charles Boyung
    Apr 6, 2010 at 18:09
  • Apple has nothing explicit either, but their examples also only feature the checkbox to the left. What's up with that? Apr 6, 2010 at 18:27
  • 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.
    – intuitionhq
    Apr 7, 2010 at 4:21
  • The Accessibility sites recommend the labels come after the checkbox, and use a "for" attribute.
    – Susan R
    Apr 15, 2011 at 23:28
  • Toolkits usually provide a widget which forces the checkbox to be on the right of the label, so there is no guideline to write. Aug 3, 2011 at 17:08

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".


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.


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.

  • 1
    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?
    – Izhaki
    Jan 15, 2014 at 21:44
  • As a programmer, I don't know that I agree the location of the checkbox has any real bearing on difficulty in lay out.
    – DA01
    Jan 15, 2014 at 22:11

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" :)
    – jensgram
    May 26, 2011 at 6:34
  • 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. May 26, 2011 at 8:57

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....


I'd also vote for following the "control-then-label" model that someone referenced, but with the caveat that context should take precedence over convention.

For example: There's an online government assistance form that asks users to gather several documents before starting. The system only allows users to proceed to Step 1 of the form if they've checked-off each of the items on the list. In this instance the checkboxes form a checklist, the overwhelming majority of which put boxes on the left.

On the other hand, let's say we have some type of retail/sales application with an employee management section, and you for whatever reason you can select multiple users via checkbox, like so:

Name         Title               Hire Date         Select
--------     ---------------     ---------         ------
John Doe     Sales Associate     9/12/03           [x]
Jane Doe     Regional Manager    12/3/01           [x]

In this case, I think the checkboxes should sit on the right because the connotation is different (you're selecting items for further action, not for elimination from the list). Both iOS (nothing specific in the HIG, weirdly) and Android (http://developer.android.com/guide/topics/ui/controls/checkbox.html) float the checkboxes on the right. To me, this makes the most sense for this type of application because it gives some visual distinction to the checkboxes; floating them left in this instance would, in my opinion, be a little jarring alignment-wise.


There is no one size fits all, but one thing to look at is consistency. You will notice that some pretend that having the checkbox on the left and the label to the right makes for better alignment... and yet would probably never advocate for an edit box control to be seen on the left of it's descriptive label. If alignment was so important they would do it for that too.

Some others mention reading from left to right as being relevant to having the check box to the left of the label... as if reading the text first and the having the checkbox (answer to that text) follow directly is less intuitive than having a checkbox... skipping it to read the label and then scanning back to the left to put your input (essentially the reply to the label). It's hard to see how having to provide the answer prior to the question is fundamentally more intuitive.

So at least for form type interfaces with many inputs, it is clear that the checkboxes should be on the right like all other input controls.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.