Displays a checkbox
1 |
<label> |
2 |
<input type="checkbox" /> |
3 |
Checkbox |
4 |
</label> |
Import
@import "@webtui/css/components/checkbox.css";
Usage
<label>
<input type="checkbox" />
Checkbox
</label>
Examples
Checked/Unchecked
1 |
|
2 |
<label> |
3 |
<input type="checkbox" /> |
4 |
Unchecked |
5 |
</label> |
6 |
<label> |
7 |
<input type="checkbox" checked /> |
8 |
Checked |
9 |
</label> |
10 |
|
Disabled
1 |
|
2 |
<label> |
3 |
<input type="checkbox" disabled /> |
4 |
Disabled |
5 |
</label> |
6 |
<label> |
7 |
<input type="checkbox" checked disabled /> |
8 |
Checked Disabled |
9 |
</label> |
10 |
|
Reference
Extending
To extend the Checkbox stylesheet, define a CSS rule on the components
layer
@layer components {
input[type="checkbox"]:not([is-="switch"]) {
/* ... */
}
}
Scope
- All native
<input type="checkbox">
elements without is-="switch"
input[type="checkbox"]:not([is-="switch"]) {
/* ... */
}