Version:

Install ​

shell
npm i @vaadin/radio-group

Import ​

javascript
import '@vaadin/radio-group';

Variants ​

Default ​

html
<vaadin-radio-group label="Option wählen">
    <vaadin-radio-button label="Option 1" value="0" />
    <vaadin-radio-button label="Option 2" value="1" />
    <vaadin-radio-button label="Option 3" value="2" />
</vaadin-radio-group>
javascript
document.querySelector('vaadin-radio-group').value = '0';

Required ​

html
<vaadin-radio-group label="Pflichtfeld" required>
    <vaadin-radio-button label="Option 1" value="0" />
    <vaadin-radio-button label="Option 2" value="1" />
    <vaadin-radio-button label="Option 3" value="2" />
</vaadin-radio-group>
javascript
document.querySelector('vaadin-radio-group').value = '0';

Disabled ​

html
<vaadin-radio-group label="Inaktiv" disabled>
    <vaadin-radio-button label="Option 1" value="0" />
    <vaadin-radio-button label="Option 2" value="1" />
    <vaadin-radio-button label="Option 3" value="2" />
</vaadin-radio-group>
javascript
document.querySelector('vaadin-radio-group').value = '0';

Invalid ​

html
<vaadin-radio-group label="Fehler" invalid>
    <vaadin-radio-button label="Option 1" value="0" />
    <vaadin-radio-button label="Option 2" value="1" />
    <vaadin-radio-button label="Option 3" value="2" />
</vaadin-radio-group>
javascript
document.querySelector('vaadin-radio-group').value = '0';
document.querySelector('vaadin-radio-group').errorMessage = 'Bitte wählen Sie eine Option.';

Vertical ​

html
<vaadin-radio-group label="Vertikal" theme="vertical">
    <vaadin-radio-button label="Option 1" value="0" />
    <vaadin-radio-button label="Option 2" value="1" />
    <vaadin-radio-button label="Option 3" value="2" />
    <vaadin-radio-button label="Option 4" value="3" />
</vaadin-radio-group>
javascript
document.querySelector('vaadin-radio-group').value = '0';