# Install

```shell
npm i @mate-vue/radio-group
```

# Import

```vue
<script setup>
import { MateRadioButton, MateRadioButtonGroup } from '@mate-vue/radio-group';
</script>
```

# Variants

## Default

```vue
<template>
  <MateRadioButtonGroup label="Option wählen" value="0">
    <MateRadioButton label="Option 1" value="0" />
    <MateRadioButton label="Option 2" value="1" />
    <MateRadioButton label="Option 3" value="2" />
  </MateRadioButtonGroup>
</template>
```

## Required

```vue
<template>
  <MateRadioButtonGroup label="Pflichtfeld" required value="0">
    <MateRadioButton label="Option 1" value="0" />
    <MateRadioButton label="Option 2" value="1" />
    <MateRadioButton label="Option 3" value="2" />
  </MateRadioButtonGroup>
</template>
```

## Disabled

```vue
<template>
  <MateRadioButtonGroup label="Inaktiv" disabled value="0">
    <MateRadioButton label="Option 1" value="0" />
    <MateRadioButton label="Option 2" value="1" />
    <MateRadioButton label="Option 3" value="2" />
  </MateRadioButtonGroup>
</template>
```

## Invalid

```vue
<template>
  <MateRadioButtonGroup label="Fehler" invalid errorMessage="Bitte wählen Sie eine Option." value="0">
    <MateRadioButton label="Option 1" value="0" />
    <MateRadioButton label="Option 2" value="1" />
    <MateRadioButton label="Option 3" value="2" />
  </MateRadioButtonGroup>
</template>
```

## Vertical

```vue
<template>
  <MateRadioButtonGroup label="Vertikal" theme="vertical" value="0">
    <MateRadioButton label="Option 1" value="0" />
    <MateRadioButton label="Option 2" value="1" />
    <MateRadioButton label="Option 3" value="2" />
    <MateRadioButton label="Option 4" value="3" />
  </MateRadioButtonGroup>
</template>
```