The Checkbox-Panel has the same function as the Checkbox. In addition to the normal Checkbox, the Checkbox-Panel offers the option of displaying subtexts, Card-Badges or Icons.
Number | Type | Description | Optional | Info |
---|---|---|---|---|
1 | Text | Label | No | |
2 | Text | Subtext | Yes | |
3 | Slot | Suffix | Yes | |
3a | Component | sbb-icon | Yes | |
3b | Text | Yes | ||
4 | Component | sbb-card-badge | Yes |
The sbb-checkbox-panel
component provides the same functionality as a native <input type="checkbox"/>
enhanced with the selection panel design and functionalities.
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 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>
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>
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>
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
.
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.
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. |
Name | Type | Description | Inherited From |
---|---|---|---|
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. |
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). |