# 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';
```