Possible bug - Checkbox and Formlayout?

All the fields in a FormLayout have the caption on the left except Checkbox which has it on the right.

I have tried using “direction: rtl” in the CSS as suggested in Book of Vaadin, but all that does is reverse the box and the label, while both remain on the right side of the form.

The attached image shows the form (with text blurred out) with the checkbox without direction: rtl.

It’s not a bug, it’s a feature :wink:

No really, I do like it a lot, the checkbox caption is on the right side, it just feels native and correct. You can wrap the checkbox into a Horizontal Layout to give it a left and right sided caption.

For those who want a checkbox-like component that works immediately in a FormLayout like all the other Fields, without messing around with css, here’s the Select wrapper I went with:

import com.vaadin.data.Property;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.NativeSelect;

public class YesNoSelect extends NativeSelect {

    public YesNoSelect(String caption, final CheckBox toShadow) {
        setItemCaption(Boolean.TRUE, "Yes");
        setItemCaption(Boolean.FALSE, "No");
        if (null != toShadow) {
        addValueChangeListener(new ValueChangeListener() {
            public void valueChange(Property.ValueChangeEvent event) {
                if (null != toShadow) {


    public Boolean getValue() {
        return (Boolean) super.getValue();


I’ve also created a solution for this, called
. It is an extension of CheckBox which delegates caption handling (unlike normal CheckBox). You can use it exactly like a normal CheckBox.

Hi Auke,

thanks for writing FormCheckBox, which I’ve been using a lot in 7.x.

Do you plan to upgrade it to 8.x? Or, is there some special trick in 8.x which makes it pointless?

Thanks a lot,

Hi Marco,

FormCheckBox doesn’t quite work for me in Vaadin 8.1.x, but maybe you have had more luck than me. The solution that I found works for me is to wrap the checkbox in a CssLayout, and then set the caption to the CssLayout rather than to the CheckBox, e.g. (pardon my Kotlin):

    CssLayout().apply {
        caption = "CheckBox Caption"
            CheckBox().apply {

instead of

    CheckBox("CheckBox Caption").apply {

It would be good to know if this solution works for you too.