InputCheckbox

The input type Checkbox generates a rectangular box that is activated and deactivated again by clicking on it. When activated, there is a colored tick in the box.

Construction

Code

<kol-input-checkbox _label="false">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung"></kol-link> zu.</kol-input-checkbox>
<kol-input-checkbox _variant="switch" _label="Geburtsdatum anzeigen?"></kol-input-checkbox>
<kol-input-checkbox _variant="button" _label="Schalter aktiviert" _checked></kol-input-checkbox>
<kol-input-checkbox _variant="button" _label="Schalter deaktiviert"></kol-input-checkbox>

Example

Ich stimme der zu.

Events

For the handling of events or callbacks, see .

Event	trigger	Value
focus	Input field is focused	-
click	Input field is clicked	-
input	Checkbox is checked or unchecked (corresponds to native input event)	Defined _value if active, otherwise null
change	Checkbox is checked or unchecked (corresponds to native change event)	Defined _value if active, otherwise null
blur	Input field loses focus	-

Usage

Checkboxes are used as a single element or as a list of any number of checkboxes. They allow users to select one or more from a predefined number of options.

Variants

Using the _variant attribute, the following variants can be selected (see examples above):

• button: changes the icon depending on the status (example 3+4)
• switch: turns the checkbox into a horizontal switch, where the right is considered active and the left is considered inactive. (Example 2)

Best practices

• Use a single checkbox if you want a simple confirmation from users, e.g. accepting the data protection declaration.
• Use a group of checkboxes to give users the opportunity to select one or more values.

Accessibility

Avoid using many checkboxes on one page, as this will quickly make your content confusing and long. In such use cases, consider using a Select box with _multiple.

Make sure to assign a label to each checkbox, as this is read out by screen readers and thus enables the input field to be clearly identified.

Keyboard controls

button	Function
Tab	Focuses the checkbox or allows you to switch between checkboxes in a list.
Empty	Activates or deactivates the checkbox. The Indeterminate state cannot be established via the keyboard.

Links and references

Properties

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Defines the key combination that can be used to trigger or focus the component's interactive element.	string | undefined	undefined
_checked	_checked	Defines whether the checkbox is checked or not. Can be read and written.	boolean | undefined	false
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_hideLabel	_hide-label	Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.	boolean | undefined	false
_hideMsg	_hide-msg	Hides the error message but leaves it in the DOM for the input's aria-describedby.	boolean | undefined	false
_hint	_hint	Defines the hint text.	string | undefined	''
_icons	_icons	Defines the icon classnames (e.g. _icons="fa-solid fa-user").	string | undefined | { checked: string; indeterminate?: string | undefined; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate: string; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate?: string | undefined; unchecked: string; }	undefined
_id	_id	[DEPRECATED] Will be removed in the next major version. Defines the internal ID of the primary component element.	string | undefined	undefined
_indeterminate	_indeterminate	Puts the checkbox in the indeterminate state, does not change the value of _checked.	boolean | undefined	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.	string	undefined
_labelAlign	_label-align	Defines which alignment should be used for presentation.	"left" | "right" | undefined	'right'
_msg	_msg	Defines the properties for a message rendered as Alert component.	Omit<AlertProps, "_on" | "_hasCloser" | "_label" | "_level" | "_variant"> & { _description: string; } | string | undefined	undefined
_name	_name	Defines the technical name of an input field.	string | undefined	undefined
_on	--	Gibt die EventCallback-Funktionen für das Input-Event an.	InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined	undefined
_required	_required	Makes the input element required.	boolean | undefined	false
_shortKey	_short-key	Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.	string | undefined	undefined
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'
_touched	_touched	Shows if the input was touched by a user.	boolean | undefined	false
_value	_value	Defines the value of the element.	boolean | null | number | object | string | undefined	true
_variant	_variant	Defines which variant should be used for presentation.	"button" | "default" | "switch" | undefined	'default'

Methods

getValue

getValue() => Promise<StencilUnknown>

Returns the current value.

Returns

Type: Promise<StencilUnknown>

kolFocus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

Slots

Slot	Description
"expert"	Checkbox description.

---

Usage _msg

Case	_msg-Value
No message	undefined
Default error message	string
Message	{_type: 'success', _description: 'Success message'}

View example

Live editor

Examples