FormInputRadio since v0.17.0

A radio button element wrapped inside a labelled form element. The label and input elements will be generated at runtime based on the options prop, which is expected to be an array. The expected format of the array items is { value: 'uniqueValueString', label: 'uniqueLabelString'}. While the component was designed for mainly two or three options, it can host any number of options.

The element supports the Vue.js v-model directive. On input the directive will be updated with the index of selected option.

Preview

Example

<template>
  <FormInputRadio id="demoRadio"
                  name="demoRadio"
                  label="Label"
                  description="Showcases the radio element"
                  :options="[{ value: '1', label: 'First Element' }, { value: '2', label: 'Second Element' }]">
  </FormInputRadio>
</template>

<script setup>
import { FormInputRadio } from '@discue/ui-components';
</script>