Properties
Property | Attribute | Description | Type | Default |
checked | checked | Whether the checkbox is checked. | boolean | false |
disabled | disabled | Whether the checkbox is disabled. | boolean | false |
iconName | icon-name | The icon name we want to use, choose from the small icon variants from the ui-icons category from https://icons.app.sbb.ch (optional). | string | undefined |
iconPlacement | icon-placement | The label position relative to the labelIcon. Defaults to end | "end" | "start" | 'end' |
indeterminate | indeterminate | Whether the checkbox is indeterminate. | boolean | false |
required | required | Whether the checkbox is required. | boolean | false |
size | size | Label size variant, either m or s. | "m" | "s" | 'm' |
value | value | Value of checkbox. | string | undefined |
Events
Event | Description | Type |
didChange | [DEPRECATED] only used for React. Will probably be removed once React 19 is available.
| CustomEvent<any> |
Slots
Slot | Description |
"icon" | Slot used to render the checkbox icon (disabled inside a selection panel). |
"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). |
"unnamed" | Slot used to render the checkbox label's text. |
Dependencies
Depends on
Graph
graph TD;
sbb-checkbox --> sbb-visual-checkbox
sbb-checkbox --> sbb-icon
style sbb-checkbox fill:#f9f,stroke:#333,stroke-width:4px
Demo Example
S M
Nein Ja
Nein Ja
Am Anfang Am Ende
White Milk Iron Charcoal Black
Mehr Beispiele auf Storybook Impressum Contatto Impostazioni dei cookie