Displays a checkbox
| 1 |
<label> |
| 2 |
<input type="checkbox" is-="checkbox" /> |
| 3 |
Unchecked |
| 4 |
</label> |
| 5 |
<label> |
| 6 |
<input type="checkbox" is-="checkbox" checked /> |
| 7 |
Checked |
| 8 |
</label> |
Import
@import '@webtui/css/components/checkbox.css';
Usage
Both type="checkbox" and is-="checkbox" are necessary because the switch component is also a checkbox under the hood
<label>
<input type="checkbox" is-="checkbox" />
Checkbox
</label>
Examples
disabled
| 1 |
|
| 2 |
<label> |
| 3 |
<input type="checkbox" is-="checkbox" disabled /> |
| 4 |
Disabled |
| 5 |
</label> |
| 6 |
<label> |
| 7 |
<input type="checkbox" is-="checkbox" checked disabled /> |
| 8 |
Checked Disabled |
| 9 |
</label> |
| 10 |
|
Reference
Properties
--placeholder-content: The content of the checkbox placeholder--placeholder-background: The background color of the checkbox placeholder--placeholder-color: The text color of the checkbox placeholder--checked-content: The content of the checkbox when checked--checked-background: The background color of the checkbox when checked--checked-color: The text color of the checkbox when checked
| 1 |
|
| 2 |
<label> |
| 3 |
<input type="checkbox" is-="checkbox" /> |
| 4 |
Default |
| 5 |
</label> |
| 6 |
<label> |
| 7 |
<input type="checkbox" is-="checkbox" checked /> |
| 8 |
Default Checked |
| 9 |
</label><br/> |
| 10 |
<label> |
| 11 |
<input type="checkbox" is-="checkbox" class="custom" /> |
| 12 |
Custom |
| 13 |
</label> |
| 14 |
<label> |
| 15 |
<input type="checkbox" is-="checkbox" checked class="custom" /> |
| 16 |
Custom Checked |
| 17 |
</label> |
| 18 |
|
| 1 |
|
| 2 |
input[type='checkbox'][is-='checkbox'].custom { |
| 3 |
--placeholder-content: '( )'; |
| 4 |
--placeholder-background: var(--background2); |
| 5 |
--placeholder-color: var(--foreground1); |
| 6 |
--checked-content: 'X'; |
| 7 |
--checked-color: red; |
| 8 |
} |
| 9 |
|
Extending
To extend the Checkbox stylesheet, define a CSS rule on the components layer
@layer components {
input[type='checkbox'][is-='checkbox'] {
/* ... */
}
}
Scope
- All native
<input type="checkbox"> elements with is-="checkbox"
input[type='checkbox'][is-='checkbox'] {
/* ... */
}