Checkbox-Panel

Info

Was macht die Komponente?

Das Checkbox-Panel erfüllt die gleiche Aufgabe wie die Checkbox. Zusätzlich zur normalen Checkbox bietet das Checkbox-Panel die Möglichkeit Subtexte, Card-Badges oder Icons darzustellen.

Wann soll die Komponente eingesetzt werden?

Um Nutzenden die Möglichkeit zu geben, mehrere unabhängige Optionen auszuwählen.
Um eine Ja/Nein- oder Ein/Aus-Auswahl anzubieten.
Um Zustimmungen oder Bedingungen zu bestätigen (z.B. Newsletter-Anmeldung).
Wenn das Checkbox-Panel besser ins Layout passt als die normale Checkbox.
Wenn weitere Inhalte (wie Icons, Texte, Card-Badges) nötig sind, bzw. die Möglichkeiten der normalen Checkbox nicht ausreichen um die Auswahl optimal zu beschreiben.
Wenn frei wählbarer Inhalt unterhalb des Checkbox-Panels angezeigt werden soll. Technische Implemenation siehe "Selection-Expansion-Panel".

Regeln

Jedes Checkbox-Panel soll klar beschriftet sein und die Option eindeutig benennen.
Gruppen von Checkboxes sollen logisch zusammengefasst werden.
Vermeide zu viele Optionen in einer Gruppe, um die Übersichtlichkeit zu bewahren (max. 5-7 Optionen).
Vermeide zu viele Inhalte im Checkbox-Panel um die Lesbarkeit und Übersichtlichkeit zu gewährleisten.

Übergeordnete Komponenten

Checkbox-Group

Anatomie

Nummer	Typ	Beschreibung	Optional
1	Text	Label	Nein
2	Text	Subtext	Ja
3	Slot	Suffix	Ja
3a	Komponente	`sbb-icon`	Ja
3b	Text		Ja
4	Komponente	`sbb-card-badge`	Ja

Demo

Spielwiese

Beispiele

Default Unchecked

Default Checked

Default Indeterminate

Size S

Milk

Disabled Checked

Disabled Unchecked

Disabled Indeterminate

With Form

HTML-Markup kopiert.

Implementation

The sbb-checkbox-panel component provides the same functionality as a native <input type="checkbox"/> enhanced with the selection panel design and functionalities.

Slots

It is possible to provide a label via an unnamed slot;
additionally the slots named subtext can be used to provide a subtext and
the slot named suffix can be used to provide suffix items.
If you use a , the slot badge is automatically assigned.

<sbb-checkbox-panel>
  <sbb-card-badge>%</sbb-card-badge>
  Label
  <span slot="subtext">Subtext</span>
  <span slot="suffix">Suffix</span>
</sbb-checkbox-panel>

States

The component could be checked or not depending on the value of the checked attribute.

<sbb-checkbox-panel value="example-value" checked>Checked state</sbb-checkbox-panel>

It has a third state too, which is set if the indeterminate property is true.
This is useful when multiple dependent checkbox-panels are used
(e.g., a parent which is checked only if all the children are checked, otherwise is in indeterminate state).
Clicking on a sbb-checkbox-panel in this state sets checked to true and indeterminate to false.

<sbb-checkbox-panel value="indeterminate-checkbox-panel" indeterminate="true"
  >Indeterminate state</sbb-checkbox-panel
>

The component can be disabled by using the disabled property.

<sbb-checkbox-panel value="disabled-checkbox" disabled="true">Disabled</sbb-checkbox-panel>

Style

The component's label can be displayed in bold using the sbb-text--bold class on a wrapper tag:

<sbb-checkbox-panel value="bold">
  <span class="sbb-text--bold">Bold label</span>
</sbb-checkbox-panel>

Events

Consumers can listen to the native change event on the sbb-checkbox-panel component to intercept the input's change;
the current state can be read from event.target.checked, while the value from event.target.value.

Accessibility

The component provides the same accessibility features as the native checkbox.

Always provide an accessible label via aria-label for checkboxes without descriptive text content.
If you don't want the label to appear next to the checkbox, you can use aria-label to specify an appropriate label.

Properties

Name	Attribute	Privacy	Type	Default	Description
`borderless`	`borderless`	public	`boolean`	`false`	Whether the unselected panel has a border.
`checked`	`checked`	public	`boolean`	`false`	Whether the checkbox is checked.
`color`	`color`	public	`'white' \| 'milk'`	`'white'`	The background color of the panel.
`disabled`	`disabled`	public	`boolean`	`false`	Whether the component is disabled.
`form`	-	public	`HTMLFormElement \| null`		Returns the form owner of internals target element.
`group`	-	public	`SbbCheckboxGroupElement \| null`	`null`	Reference to the connected checkbox group.
`indeterminate`	`indeterminate`	public	`boolean`	`false`	Whether the checkbox is indeterminate.
`name`	`name`	public	`string`		Name of the form element. Will be read from name attribute.
`required`	`required`	public	`boolean`	`false`	Whether the component is required.
`size`	`size`	public	`SbbCheckboxSize`	`'m'`	Label size variant, either m or s.
`value`	`value`	public	`string \| null`	`null`	Value of the form element.

Events

Name	Type	Description
`change`	`Event`	Event fired on change.
`didChange`	`CustomEvent<void>`	Deprecated. used for React. Will probably be removed once React 19 is available.
`input`	`InputEvent`	Event fired on input.

Slots

Name	Description
	Use the unnamed slot to add content to the `sbb-checkbox`.
`badge`	Use this slot to provide a `sbb-card-badge` (optional).
`subtext`	Slot used to render a subtext under the label (only visible within a selection panel).
`suffix`	Slot used to render additional content after the label (only visible within a selection panel).