Overview
These are checkbox components:
The checkbox is generally used to select one of two possible values in a form. It should not be used to make real-time changes; for this situation, use a KSwitch component instead.
Layout:
- Aligned with container margin
- When used in a group, vertically stacked
- Hierarchical nesting is avoided
Labels:
- Labels should be short and concise
- The checked state should represent an affirmative value
Checkboxes can also have a "partially-checked" or "indeterminate" state used in cases where the value is neither true nor false, such as when a subset of a topic is selected:
A user cannot enter the indeterminate state by interacting directly with the checkbox; it only occurs due to external interactions.
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
label | Text label | string |
null
| — |
showLabel | Whether or not to show the label | boolean |
true
| — |
checked | Checked state | boolean |
false
| — |
indeterminate | Indeterminate state. Overrides checked state | boolean |
false
| — |
disabled | Disabled state | boolean |
false
| — |
description | Description - subtext to the label | string |
null
| — |
Events
| Name | Description |
|---|---|
keydown | — |
change | Emits change event |
blur | Emits blur event, useful for validation |
Slots
| Name | Description |
|---|---|
default | — |
Methods
| Name | Description |
|---|---|
focus | Sets keyboard focus to the checkbox |