Was macht die Komponente?
Das Radio-Button-Panel erfüllt die gleiche Aufgabe wie der Radio-Button. Zusätzlich zum normalen Radio-Button bietet das Radio-Button-Panel die Möglichkeit Subtexte, Card-Badges oder Icons darzustellen.
Wann soll die Komponente eingesetzt werden?
- Wenn Nutzende eine Auswahl aus einer begrenzten Anzahl von Optionen treffen sollen.
- Wenn nur eine Option aus mehreren möglichen ausgewählt werden darf.
- Wenn das Radio-Button-Panel besser ins Layout passt als der normale Radiobutton.
- Wenn weitere Inhalte (wie Icons, Texte, Card-Badges) nötig sind, bzw. die Möglichkeiten des normalen Radio-Buttons nicht ausreichen um die Auswahl optimal zu beschreiben.
- Wenn frei wählbarer Inhalt unterhalb des Radio-Button-Panels angezeigt werden soll. Technische Implemenation siehe "Selection-Expansion-Panel".
Regeln
- Radio-Button-Panels sollen in Gruppen (Radio-Button-Group) verwendet werden, um eine klare Auswahlmöglichkeit zu bieten.
- Jede Option innerhalb einer Gruppe von Radio-Button-Panels soll eindeutig beschriftet und leicht verständlich sein.
- Vermeide es, zu viele Optionen in einer Radio-Button-Gruppe zu platzieren, um die Übersichtlichkeit zu gewährleisten und die Auswahl zu erleichtern.
- Vermeide zu viele Inhalte im Radio-Button-Panel um die Lesbarkeit und Übersichtlichkeit zu gewährleisten.
Übergeordnete Komponenten
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 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 |
Spielwiese
Beispiele
The sbb-radio-button-panel component provides the same functionality as a native <input type="radio"/> enhanced with the selection panel design and functionalities. Use multiple sbb-radio-button-panel components inside a sbb-radio-button-group component in order to display a radio input within a group.
<sbb-radio-button-group value="Value one" aria-label="Radio group label">
<sbb-radio-button-panel value="Value one">Option one</sbb-radio-button-panel>
<sbb-radio-button-panel value="Value two">Option two</sbb-radio-button-panel>
</sbb-radio-button-group>
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 badge is automatically assigned.
<sbb-radio-button-panel>
<sbb-card-badge>%</sbb-card-badge>
Label
<span slot="subtext">Subtext</span>
<span slot="suffix">Suffix</span>
</sbb-radio-button-panel>
States
It is possible to display the component in disabled or checked state by using the self-named properties.
The allowEmptySelection property allows user to deselect the component.
<sbb-radio-button-panel value="One" checked>Option one</sbb-radio-button-panel>
<sbb-radio-button-panel value="Two" disabled>Option two</sbb-radio-button-panel>
<sbb-radio-button-panel value="Three" allowEmptySelection>Option three</sbb-radio-button-panel>
Style
The component's label can be displayed in bold using the sbb-text--bold class on a wrapper tag:
<sbb-radio-button-panel value="bold">
<span class="sbb-text--bold">Bold label</span>
</sbb-radio-button-panel>
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
allowEmptySelection |
allow-empty-selection |
public | boolean |
false |
Whether the radio can be deselected. |
borderless |
borderless |
public | boolean |
false |
Whether the unselected panel has a border. |
checked |
checked |
public | boolean |
false |
Whether the radio button is checked. |
color |
color |
public | 'white' | 'milk' |
'white' |
The background color of the panel. |
disabled |
disabled |
public | boolean |
false |
Whether the radio button is disabled. |
group |
- | public | SbbRadioButtonGroupElement | null |
null |
Reference to the connected radio button group. |
required |
required |
public | boolean |
false |
Whether the radio button is required. |
size |
size |
public | SbbRadioButtonSize |
'm' |
Label size variant, either m or s. |
value |
value |
public | string | undefined |
Value of radio button. |
Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
|---|---|---|---|---|---|
select |
public | void |
SbbRadioButtonCommonElementMixin |
Slots
| Name | Description |
|---|---|
| Use the unnamed slot to add content to the radio label. | |
badge |
Use this slot to provide a sbb-card-badge (optional). |
subtext |
Slot used to render a subtext under the label. |
suffix |
Slot used to render additional content after the label. |