What does the component do?
The Radio-Button-Panel has the same function as the Radio-Button. In addition to the normal Radio-Button, the Radio-Button-Panel offers the option of displaying subtexts, Card-Badges or Icons.
When should the component be used?
- When users should make a selection from a limited number of options.
- When only one option may be selected from several possible options.
- If the Radio-Button-Panel fits better into the layout than the normal Radio-Button.
- If further content (such as icons, texts, card badges) is required or the options of the normal checkbox are not enough to optimally describe the selection.
- If content of your choice is to be displayed below the Checkbox-Panel. For technical implementation, see "Selection-Expansion-Panel".
Rules
- Radio-Button-Panels should be used in groups (radio-button-group) to provide a clear choice.
- Each option within a radio-button-group should be clearly labelled and easy to understand.
- Avoid placing too many options in a radio button group to ensure clarity and to make selection easier.
- Avoid too much content in the Radio-Button-Panel to ensure readability and clarity.
Parent Components
| 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 |
Playground
Examples
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. |