Diggi Docs

RadioButton

Radiobuttons bieten eine Auswahlmöglichkeit und erlauben dem Nutzer die Auswahl einer einzelnen Option aus einer Gruppe.

Radiobuttons werden verwendet, wenn der Nutzer nur eine einzige Option auswählen kann. Soll eine Mehrfachauswahl möglich sein, wird eine Checkbox verwendet. Radiobuttons agieren in einer Gruppe. Sie können nur dann vollständig inaktiv sein, wenn der Nutzer noch keine der Optionen ausgewählt hat. Sobald eine Auswahl getroffen wurde, ist der ausgewählte Button der Gruppe aktiv. In den meisten Fällen ist bei einer Radiobutton-Auswahl eine der Optionen als aktiv vorbelegt. Im Gegensatz zu Checkboxes wird ein aktiver Radiobutton durch eine erneute Auswahl nicht deaktiviert. Um die Auswahl zu ändern, muss ein anderer Radiobutton der Gruppe ausgewählt werden.

Bei Verwendung des Types Radio müssen die BUttons mit einer RadioGroup Komponente umschlossen sein.

Info! Diese Komponente kann auch ohne Label verwendet werden, wenn der Kontext durch die Position oder ein externes Label klar wird.

Labels sind immer einzeilig und sollten eine max. Zeichenanzahl von 50 Zeichen nicht überschreiten. Längere Texte (siehe Digitale Typografie) können über dem Radiobutton ergänzt werden. Das Label des Radiobuttons referenziert dann auf den längeren Text.

Eigenschaften

Name	Type	Default Value	Description
id	string	undefined	Unique ID for the RadioButton, unique id will be generated if not set.
label	string	undefined	Label of the RadioButton
required	boolean	undefined	If present, indicates that the user must specify a value for the input before the owning form can be submitted
value	string	{}	Value of the RadioButton
name	string	undefined	Name of the RadioButton for Grouping
disabled	boolean	false	Disables the Radiobutton
checked	boolean	undefined	Checks/Unchecks the RadioButton
title	string	undefined	Appears on hover
isLoading	undefined	undefined
style	string	undefined	Additional css styles

Weitere dazugehörige Komponenten

RadioGroup

Beispiele

Default

Radio Button Label

Slotted Label

Radio Button Label

No Label

Disabled

Radio Button Label

Disabled Checked

Radio Button Label

Loading

Radio Button Label

RadioButtons

Radio Button 1

Radio Button 2

bound values

Radio 1: undefined | Radio 2 : true

Do's and Don'ts

Do

Don't

Einfachauswahl aus einer Liste

Keine Verwendung als An/Aus-Schalter – Für diese Fälle steht das UI-Element „Switch“ zur Verfügung