Radio-Button

Info

What does the component do?

A radio button allows users to make a selection from a group of options, whereby only one option can be selected at a time.

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.

Rules

Radio buttons 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.

Parent Components

Radio-Button-Group

Anatomy

Number	Type	Description	Optional	Info
1	Text	Label	No

Demo

Playground

Example

Sizes

Disabled

Yes

Background

White

Milk

Iron

Charcoal

Black

Examples

Default

Size S

Checked

Disabled

Checked Disabled

Multiline Label

Default Bold

Checked Bold

HTML-Markup kopiert.

Implementation

The sbb-radio-button component provides the same functionality
as a native <input type="radio"/> enhanced with the SBB Design: use multiple sbb-radio-button 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 value="Value one">Option one</sbb-radio-button>
  <sbb-radio-button value="Value two">Option two</sbb-radio-button>
</sbb-radio-button-group>

States

It is possible to display the component in disabled or checked state by using the self-named properties.

The component has a required property, which can be useful
for setting a custom sbb-form-error message
within a sbb-form-field.

The allowEmptySelection property allows user to deselect the component.

<sbb-radio-button value="One" checked>Option one</sbb-radio-button>

<sbb-radio-button value="Two" disabled>Option two</sbb-radio-button>

<sbb-radio-button value="Three" required>Option three</sbb-radio-button>

<sbb-radio-button value="Four" allowEmptySelection>Option four</sbb-radio-button>

Style

The component has two different sizes, which can be changed using the size property (m, which is the default, and s).

<sbb-radio-button value="small" size="s">Size</sbb-radio-button>

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

<sbb-radio-button value="bold">
  <span class="sbb-text--bold">Bold label</span>
</sbb-radio-button>

Properties

Name	Attribute	Privacy	Type	Default	Description
`allowEmptySelection`	`allow-empty-selection`	public	`boolean`	`false`	Whether the radio can be deselected.
`checked`	`checked`	public	`boolean`	`false`	Whether the radio button is checked.
`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.