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