InputCheckbox

Der Input-Typ Checkbox generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box.

Konstruktion

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>

Beispiel

Ich stimme der zu.

Verwendung

Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.

Varianten

Mittels des Attributs _variant können folgende Varianten ausgewählt werden (Beispiele siehe oben):

button: wechselt das Icon je nach Zustand (Beispiel 3+4)
switch: verwandelt die Checkbox in einen horizontalen Schalter, hierbei gilt rechts als aktiv und links als inaktiv. (Beispiel 2)

Best practices

Verwenden Sie eine einzelne Checkbox, wenn Sie von den Nutzer:innen eine einfach Bestätigung wünschen, z.B. Akzeptieren der Datenschutzerklärung.
Verwenden Sie eine Gruppe von Checkboxen, um den Nutzer:innen die Möglichkeit zu geben einen oder mehrere Werte auszuwählen.

Barrierefreiheit

Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer Select-Box mit _multiple.

Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.

Tastatursteuerung

Taste	Funktion
`Tab`	Fokussiert die Checkbox bzw. ermöglicht den Wechsel zwischen Checkboxen einer Liste.
`Leer`	Aktiviert bzw. deaktiviert die Checkbox. Der Zustand *Indeterminate* ist über die Tastatur nicht herzustellen.

Links und Referenzen

Properties

Property	Attribute	Description	Type	Default
`_accessKey`	`_access-key`	Defines which key combination can be used to trigger or focus the interactive element of the component.	`string` \| `undefined`	`undefined`
`_alert`	`_alert`	Defines whether the screen-readers should read out the notification.	`boolean` \| `undefined`	`true`
`_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`
`_error`	`_error`	Defines the error message text.	`string` \| `undefined`	`undefined`
`_hideError`	`_hide-error`	Hides the error message but leaves it in the DOM for the input's aria-describedby.	`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`
`_hint`	`_hint`	Defines the hint text.	`string` \| `undefined`	`''`
`_icon`	`_icon`	[DEPRECATED] Use _icons.	`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`
`_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`	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`	`_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`	`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` \| `undefined`	`undefined`
`_required`	`_required`	Makes the input element required.	`boolean` \| `undefined`	`false`
`_tabIndex`	`_tab-index`	Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)	`number` \| `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`
`_type`	`_type`	[DEPRECATED] Verwende stattdessen das Attribute _variant. Deprecated: Defines which variant should be used for presentation.	`"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`	`undefined`
`_value`	`_value`	Defines the value of the input.	`boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`	`true`
`_variant`	`_variant`	Defines which variant should be used for presentation.	`"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`	`undefined`

Slots

Slot	Description
	Die Beschriftung der Checkbox.

Konstruktion​

Code​

Beispiel​

Verwendung​

Varianten​

Best practices​

Barrierefreiheit​

Tastatursteuerung​

Links und Referenzen​

Properties​

Slots​

Live-Editor​

Beispiele​