Skip to content
Version:

Install ​

shell
npm i @vaadin/checkbox
npm i @vaadin/checkbox-group

Import ​

javascript
import '@vaadin/checkbox';
import '@vaadin/checkbox-group';

Variants ​

Default ​

html
<vaadin-checkbox label="Default"></vaadin-checkbox>

Checked ​

html
<vaadin-checkbox label="Checked" checked></vaadin-checkbox>

Indeterminate ​

html
<vaadin-checkbox label="Indeterminate" indeterminate></vaadin-checkbox>

Disabled ​

html
<vaadin-checkbox label="Disabled" disabled></vaadin-checkbox>

Disabled Checked ​

html
<vaadin-checkbox label="Disabled checked" checked disabled></vaadin-checkbox>

Checkbox Group ​

html
<vaadin-checkbox-group label="Group">
    <vaadin-checkbox label="Item 1" value="0" />
    <vaadin-checkbox label="Item 2" value="1" />
    <vaadin-checkbox label="Item 3" value="2" />
</vaadin-checkbox-group>

Vertical Group ​

html
<vaadin-checkbox-group label="Vertical" theme="vertical">
    <vaadin-checkbox label="Item 1" value="0" />
    <vaadin-checkbox label="Item 2" value="1" />
    <vaadin-checkbox label="Item 3" value="2" />
</vaadin-checkbox-group>