Version:

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>