tuix-radio-button

Ein Element rendert die ganze Gruppe: es bildet options auf je einen Radio-Button ab.

Komponenten werden geladen…

const radio = document.querySelector('tuix-radio-button')
 
radio.options = ['Entwurf', 'Versendet', 'Bezahlt'] // Property: es ist ein Array
radio.selectedOption = 'Versendet'
 
radio.addEventListener('change', (event) => console.log(event.detail.value))

Zustände

Komponenten werden geladen…

error wird ignoriert, solange die Gruppe disabled ist.

API

Properties

Property	Attribut	Typ	Standard	Beschreibung
`options`	`options`	`(string \| number)[]`	`[]`	Ein Radio pro Eintrag. Property oder JSON im Attribut
`selectedOption`	`selectedoption`	`string \| number \| null`	`null`	Die gewählte Option
`labelSide`	`labelside`	`CheckboxLabelSide`	`right`	`left` oder `right`
`disabled`	`disabled`	`boolean`	`false`	Blockiert die ganze Gruppe
`error`	`error`	`boolean`	`false`	Rote Punkte und Labels. Ignoriert, solange disabled
`dark`	`dark`	`boolean`	`false`	Dunkle Palette

Events

Event	Detail	Wann
`change`	`{ value: string }`	Eine andere Option wird gewählt

Das Detail trägt die Option so, wie das DOM sie meldet: eine numerische Option kommt als String an. Typisiert als CustomEventTuixRadioButton.

Die Gruppe besitzt ihre Auswahl nicht: der Browser markiert das geklickte Radio, selectedOption bleibt aber der zuletzt von der Anwendung gesetzte Wert. Den neuen Wert also im Handler zurückschreiben.

Slots

Slot	Inhalt
`label-{index}`	Ersetzt das Label der Option an diesem Index, gezählt ab 0

<tuix-radio-button>
    <tuix-text slot="label-0" size="field_placeholder">Sofort zahlen</tuix-text>
    <tuix-text slot="label-1" size="field_placeholder">In 30 Tagen zahlen</tuix-text>
</tuix-radio-button>

Jedes Element ist eine vollständige Gruppe. Seine Inputs teilen zwar den Namen tuix-radio-button, liegen aber im eigenen Shadow Root des Elements, und eine native Radio-Gruppe reicht nie über zwei davon hinweg. Zwei tuix-radio-button-Elemente auf einer Seite sind also unabhängig und brauchen keinen eigenen Namen. Dieselbe Grenze ist der Grund, weshalb sich eine Gruppe nicht auf zwei Elemente aufteilen lässt: alle Optionen einer Gruppe gehören in ein options-Array.

tuix-radio-button

Zustände

Seite des Labels

API

Properties

Events

Slots

Auf dieser Seite