CP Registry

Radio

Radio-Buttons für Einfachauswahl in Formularen. Werden typischerweise in einer RadioGroup mit gemeinsamem name-Attribut verwendet. Barrierefrei mit role="radiogroup" und aria-describedby.

Standard

Einzelne Radio-Buttons. In der Praxis sollten Radios immer in einer RadioGroup stehen.

Einzelne Radio-Buttons

<Radio label="Option A" name="demo" value="a" />
<Radio label="Option B" name="demo" value="b" checked />

Zustände

Deaktivierte Radio-Buttons und Fehlermeldungen auf Einzelebene.

Disabled und Error

<Radio label="Deaktiviert" name="disabled-radio" disabled />
<Radio label="Deaktiviert + selected" name="disabled-sel" disabled checked />
<Radio label="Fehlerhafte Auswahl" name="err-radio" error="Bitte wählen Sie eine Option." />

RadioGroup

Die RadioGroup fasst zusammengehörige Radio-Buttons in einem <fieldset> mit role="radiogroup" zusammen. Das name-Prop wird an der Gruppe definiert.

Zahlungsart wählen

Zahlungsart 
<RadioGroup legend="Zahlungsart" name="payment">
  <Radio label="Überweisung" name="payment" value="bank" />
  <Radio label="Lastschrift" name="payment" value="debit" checked />
  <Radio label="Kreditkarte" name="payment" value="credit" />
</RadioGroup>

Gruppe mit Fehler und Hint

Versandart
Kontaktweg

Wir nutzen diesen Kanal für Rueckfragen.

<RadioGroup legend="Versandart" name="shipping" error="Bitte wählen Sie eine Versandart.">
  <Radio label="Standard (3-5 Tage)" name="shipping" value="standard" />
  <Radio label="Express (1-2 Tage)" name="shipping" value="express" />
</RadioGroup>

<RadioGroup legend="Kontaktweg" name="contact" hint="Wir nutzen diesen Kanal für Rueckfragen.">
  <Radio label="E-Mail" name="contact" value="email" checked />
  <Radio label="Telefon" name="contact" value="phone" />
</RadioGroup>

Installation

cp-components add radio