Checkbox
Use the KCheckbox component to allow the user to select one or more items from a set.
Basic Checkboxes
Label Prop
Label Slot
Disabled State
Validation States
Select state
TypeScript
// Using Label Prop
KCheckbox(v-model="checkbox1Checked" label="Standard Checkbox")
// Using Label Slot
KCheckbox(v-model="checkbox2Checked")
template(#label)
span.custom-colored-label Custom Colored Label
// Disabled State
KCheckbox(disabled label="Checkbox disabled")
Indeterminate State
Tri-State Checkbox
State: Indeterminate (-)
TypeScript
// With v-model or @update:indeterminate KCheckbox( v-model="checked" :indeterminate="isIndeterminate" @update:indeterminate="isIndeterminate = $event" label="Partially Selected" )
Attributes
Configure the KCheckbox component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Disables the checkbox |
| value | any | undefined | The value to be used when the checkbox is checked in a group |
| label | string | '' | The text to display next to the checkbox |
| indeterminate | boolean | false | Displays the checkbox in a tri-state (dash icon) indicating a partially selected state. |
| validation | 'success' | 'warning' | 'error' | null | null | Semantic validation state. |
| validationText | string | '' | message to display below the checkbox. |
| Name | Payload | Description |
|---|---|---|
| update:modelValue | any | Emitted when checked state changes (for v-model). |
| update:indeterminate | boolean | Emitted when indeterminate state drops to false upon user interaction. |
| change | any | Emitted on user toggle interaction. |
Slots
Use these slots to customize the KCheckbox content.
| Name | Description |
|---|---|
| label | Custom content for the checkbox label (overrides the label prop) |
| default | Fallback content for the label area |