Docs

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Docs

CheckBox

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 CheckBoxGroup component, as described in "CheckBoxGroup and RadioButtonGroup".

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. 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 ->
    checkbox2.setValue(! checkbox1.getValue()));

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

checkbox example1
An Example of a Check Box

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.