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"]) {
/* ... */
}