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