c5169e0e
Renato De Donato
a new hope
|
1
|
# paper-checkbox
|
73bcce88
luigser
COMPONENTS
|
2
3
4
5
6
7
8
9
10
|
`paper-checkbox` is a button that can be either checked or unchecked. User
can tap the checkbox to check or uncheck it. Usually you use checkboxes
to allow user to select multiple options from a set. If you have a single
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
instead.
Example:
|
c5169e0e
Renato De Donato
a new hope
|
11
12
|
```html
<paper-checkbox>label</paper-checkbox>
|
73bcce88
luigser
COMPONENTS
|
13
|
|
c5169e0e
Renato De Donato
a new hope
|
14
15
|
<paper-checkbox checked>label</paper-checkbox>
```
|
73bcce88
luigser
COMPONENTS
|
16
|
|
c5169e0e
Renato De Donato
a new hope
|
17
|
Styling a checkbox:
|
73bcce88
luigser
COMPONENTS
|
18
|
|
c5169e0e
Renato De Donato
a new hope
|
19
20
21
22
23
|
```html
<style is="custom-style">
paper-checkbox {
--paper-checkbox-label-color: #000;
--paper-checkbox-checkmark-color: #fff;
|
73bcce88
luigser
COMPONENTS
|
24
|
|
c5169e0e
Renato De Donato
a new hope
|
25
26
27
28
|
/* Unhecked state colors. */
--paper-checkbox-unchecked-color: #5a5a5a;
--paper-checkbox-unchecked-background-color: #5a5a5a;
--paper-checkbox-unchecked-ink-color: #5a5a5a;
|
73bcce88
luigser
COMPONENTS
|
29
|
|
c5169e0e
Renato De Donato
a new hope
|
30
31
32
33
34
35
|
/* Checked state colors. */
--paper-checkbox-checked-color: #009688;
--paper-checkbox-checked-ink-color: #009688;
}
</style>
```
|