Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

CheckBox

Live Demo

CheckBox is a two-state selection component that can be either checked or unchecked. The caption of the check box will be placed right of the actual check box. Vaadin provides two ways to create check boxes: individual check boxes with the CheckBox component described in this section and check box groups with the OptionGroup component in multiple selection mode, as described in "OptionGroup".

Clicking on a check box will change its state. The state is a Boolean property that you can set with the setValue() method and obtain with the getValue() method of the Property interface. Changing the value of a check box will cause a ValueChangeEvent, which can be handled by a ValueChangeListener.

CheckBox checkbox1 = new CheckBox("Box with no Check");
CheckBox checkbox2 = new CheckBox("Box with a Check");

checkbox2.setValue(true);

checkbox1.addValueChangeListener(event -> // Java 8
    checkbox2.setValue(! checkbox1.getValue()));

checkbox2.addValueChangeListener(event -> // Java 8
    checkbox1.setValue(! checkbox2.getValue()));

The result is shown in An Example of a Check Box.

checkbox example1
An Example of a Check Box

For an example on the use of check boxes in a table, see "Table".

CSS Style Rules

.v-checkbox { }
  .v-checkbox > input { }
  .v-checkbox > label { }

The top-level element of a CheckBox has the v-checkbox style. It contains two sub-elements: the actual check box input element and the label element. If you want to have the label on the left, you can change the positions with "direction: rtl" for the top element.