Formular: Radio

Mittels Radio können Nutzer*innen eine einzelne Option aus einer Liste auswählen. Im Gegensatz zum Pattern Checkbox ist hier keine Mehrfachauswahl möglich, da sich die Optionen gegenseitig ausschließen.

Varianten

Formular: Radio-Gruppe mit HTML

Vorschau

Newsletter-Format

HTML (mit Formatierung)

Text (ohne Formatierung)

Code

<div>
  <fieldset>
    <legend>Newsletter-Format</legend>

    <div>
      <input type="radio" name="gruppe1" value="html" id="gruppe1_auswahl1">
      <label for="gruppe1_auswahl1">HTML (mit Formatierung)</label>
    </div>

    <div>
      <input type="radio" name="gruppe1" value="text" id="gruppe1_auswahl2">
      <label for="gruppe1_auswahl2">Text (ohne Formatierung)</label>
    </div>
  </fieldset>
</div>

Formular: Radio-Gruppe mit Webcomponents

Vorschau

Code

<wm-radio legend="Newsletter-Format" labels="HTML (mit Formatierung);Text (ohne Formatierung)" values="html;text" name="format">
  </wm-radio>

Dev

Weitere Beispiele

Alle Formularelemente können nativ in HTML abgebildet werden. Aufgrund der mangelnden Abhängigkeit von JavaScript ist das auch der bevorzugte Weg. Wird erweiterte Funktionalität wie clientseitige Validierung, Ein- und Ausblenden von Passwörtern, Anzeigen der maximalen Zeichenanzahl et cetera benötigt, müssen Sie alternativ die Webcomponent-Variante verwenden.

HTML

Formular: Radio-Gruppe mit einfacher Beschreibung

Vorschau

Newsletter-Format

Wählen Sie Ihr bevorzugtes E-Mail-Format:

HTML (mit Formatierung)

Text (ohne Formatierung)

Code

<div>
  <fieldset aria-describedby="gruppe2_helptext">
    <legend>Newsletter-Format</legend>
    <div class="wm-forms-message" id="gruppe2_helptext">Wählen Sie Ihr bevorzugtes E-Mail-Format:</div>

    <div>
      <input type="radio" name="gruppe2" value="html" id="gruppe2_auswahl1">
      <label for="gruppe2_auswahl1">HTML (mit Formatierung)</label>
    </div>

    <div>
      <input type="radio" name="gruppe2" value="text" id="gruppe2_auswahl2">
      <label for="gruppe2_auswahl2">Text (ohne Formatierung)</label>
    </div>

  </fieldset>
</div>

Formular: Radio-Gruppe mit Beschreibung

Vorschau

Newsletter-Format

Wählen Sie Ihr bevorzugtes E-Mail-Format:

HTML (mit Formatierung)

Text (ohne Formatierung)

Code

<div>
  <fieldset aria-describedby="gruppe3_helptext">
    <legend>Newsletter-Format</legend>

    <wm-highlight color="flieder-light" id="gruppe3_helptext">
      Wählen Sie Ihr bevorzugtes E-Mail-Format:
    </wm-highlight>

    <div>
      <input type="radio" name="gruppe3" value="html" id="gruppe3_auswahl1">
      <label for="gruppe3_auswahl1">HTML (mit Formatierung)</label>
    </div>

    <div>
      <input type="radio" name="gruppe3" value="text" id="gruppe3_auswahl2">
      <label for="gruppe3_auswahl2">Text (ohne Formatierung)</label>
    </div>

  </fieldset>
</div>

Formular: Radio-Gruppe mit Fehlermeldung

Vorschau

Newsletter-Format

HTML (mit Formatierung)

Text (ohne Formatierung)

Wählen Sie ein E-Mail-Format.

Code

<div>
  <fieldset aria-describedby="msg_auswahl4">
    <legend>Newsletter-Format</legend>

    <div>
      <input type="radio" name="gruppe4" value="html" id="gruppe4_auswahl1" aria-invalid="true">
      <label for="gruppe4_auswahl1">HTML (mit Formatierung)</label>
    </div>

    <div>
      <input type="radio" name="gruppe4" value="text" id="gruppe4_auswahl2">
      <label for="gruppe4_auswahl2">Text (ohne Formatierung)</label>
    </div>
    <div class="wm-forms-message" id="msg_auswahl4">Wählen Sie ein E-Mail-Format.</div>
  </fieldset>
</div>

Webcomponent

Formular: Radio-Gruppe mit einfacher Beschreibung

Vorschau

Code

<wm-radio legend="Newsletter-Format" labels="HTML (mit Formatierung);Text (ohne Formatierung)" hint="Wählen Sie ein Format für den Newsletter" values="html;text" name="format"></wm-radio>

Formular: Radio-Gruppe mit Beschreibung

Vorschau

Wählen Sie ein Format für den Newsletter

Code

<wm-radio legend="Newsletter-Format" labels="HTML (mit Formatierung);Text (ohne Formatierung)" values="html;text" name="format">
    <wm-highlight color="wasserblau-light" slot="hint">
      Wählen Sie ein Format für den Newsletter
    </wm-highlight>
  </wm-radio>

Formular: Radio-Gruppe mit Beschreibung, Werten und Disabled

Vorschau

Code

<wm-radio legend="Newsletter-Format:" labels="HTML (mit Formatierung);Text (ohne Formatierung)" values="html;text" name="format" disabled="true;true"></wm-radio>

Formular: Radio-Gruppe mit Fehlermeldung

Vorschau

Code

<wm-radio legend="Newsletter-Format:" labels="HTML (mit Formatierung);Text (ohne Formatierung)" error="Bitte wählen Sie ein Format" values="html;text" name="format"></wm-radio>

Formular: Radio Buttons mit JavaScript befüllt

Vorschau

Code

<wm-radio legend="Radio-Gruppe" name="radio3" id="radio3" required></wm-radio>
  <script>
    const radio = document.querySelector('#radio3');
    radio.addEventListener('wm-defined',function () {
      radio.setOptions([
        {
          text: "HTML (mit Formatierung)",
          value: "html",
          checked: true
        },
        {
          text: "Text (ohne Formatierung)",
          value: "text",
          disabled: true
        },
        {
          text: "Text (ohne Formatierung)",
          value: "text",
          disabled: false
        }
      ]);
    });
  </script>

Formular: Radio-Gruppe mit Change-Event (siehe Konsole)

Vorschau

Code

<wm-radio legend="Newsletter-Format" labels="HTML (mit Formatierung);Text (ohne Formatierung)" values="html;text" name="format" id="radios2"></wm-radio>

<script>
  const radios2 = document.querySelector('#radios2');
  radios2.addEventListener('wm-change', e => {
    console.log(e)
  })
</script>

Formular: Radio-Gruppe Disabled Attribute mit JavaScript getauscht (siehe Konsole)

Vorschau

Code

<wm-radio legend="Newsletter-Format" labels="HTML (mit Formatierung);Text (ohne Formatierung)" values="html;text" name="format" disabled="true;true" id="radioSwap"></wm-radio>

  <script>
    window.addEventListener('load', () => {
      const radioSwap = document.querySelector('#radioSwap');
      if (radioSwap) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const options = radioSwap.getOptions();
              setTimeout(() => {
                options.forEach(option => {
                  option.disabled = false;
                });
                radioSwap.setOptions(options);
                console.log(radioSwap.getOptions());
                observer.disconnect();
              }, 5000);
            }
          });
        });
        observer.observe(radioSwap);
      }
    });
  </script>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Radio/Radio.js" type="module"></script>

JavaScript

import { Radio } from './wienermelange/assets/js/components/Radio/Radio.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`errormessage`	Fehlermeldung bei ungültiger Eingabe	`String`	`""`
`summaryErrormessage`	Spezifische Fehlermeldung für die Fehlerübersicht Diese Meldung wird in der Fehlerübersicht (wm-formerrorsummary) anstelle der normalen Fehlermeldung angezeigt. Dies ist nützlich, um in der Übersicht kontextspezifischere Fehlermeldungen anzuzeigen, z.B. "Bitte wählen Sie eine Option bei 'Zahlungsart'" statt nur "Auswahl erforderlich".	`String`	`""`
`hasError`	Gibt an, ob das Element einen Fehler hat Dies ist ein Statusattribut, das anzeigt, ob aktuell ein Validierungsfehler vorliegt. Es wird auf true gesetzt, wenn die Validierung fehlschlägt, und auf false zurückgesetzt, wenn die Validierung erfolgreich ist oder das Formular zurückgesetzt wird.	`Boolean`	`false`
`showErrors`	Steuert die Anzeige von Fehlermeldungen Im Gegensatz zu 'hasError' steuert dieses Attribut, ob Fehlermeldungen angezeigt werden sollen. Wenn auf true gesetzt, werden Validierungsfehler sofort angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`Boolean`	`false`
`validate`	Aktiviert die Validierung bei Eingabe Wenn auf true gesetzt, werden Auswahländerungen sofort validiert und Fehler angezeigt, ohne auf eine Formularübermittlung zu warten. Wird typischerweise vom übergeordneten wm-form Element gesteuert.	`Boolean`	`false`
`error`	Aktuelle Fehlermeldung	`String`	`""`
`info`	Zusätzliche Informationen zum Feld	`String`	leer
`checked`	Ausgewählter Wert (kann über 'checked' Attribut gesetzt werden)	`String`	`""`
`disabled`	Global disabled state	`Boolean`	`false`
`disabledoptions`	Per-option configuration for disabled state	`String`	`""`
`_errorController`			`new ErrorStateController(this)`

Methoden

Eigenschaft	Optionen	Argumente
`_handleChange`
`_handleEvent`
`formResetCallback`		/

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at