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

Component Value: 2

Properties

Name
Type
Default
Value
description
String
disabled
Boolean
false
id
String
invalid
Boolean
false
invalidMessage
String
label
String
modelValue
String
name
String
options
Array
() => []
required
Boolean
true
vertical
Boolean
false

Emits

Event
update:modelValue

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>
Improve this page
Last Updated:
Contributors: Stefan Pfaffel