documentation/components/components-checkbox.asciidoc


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

---
title: CheckBox
order: 15
layout: page
---

[[components.checkbox]]
= CheckBox

ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/check-box"]
endif::web[]

[classname]#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 [classname]#CheckBox# component described in this section
and check box groups with the [classname]#CheckBoxGroup# component, as described in
<<dummy/../../../framework/components/components-optiongroups#components.optiongroups,"CheckBoxGroup and RadioButtonGroup">>.

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


[source, java]
----
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 <<figure.components.checkbox.basic>>.

[[figure.components.checkbox.basic]]
.An Example of a Check Box
image::img/checkbox-example1.png[width=35%, scaledwidth=50%]


== CSS Style Rules


[source, css]
----
.v-checkbox { }
  .v-checkbox > input { }
  .v-checkbox > label { }
----

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