Radio group

A radio group is a container for a group of radios. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.

Examples

Basic Usage

<Mdx-radio-group :options="options" />

Label Placement

Developers can use the labelPlacement property to control how the label is placed relative to the control. This property mirrors the flexbox flex-direction property.

<Mdx-radio-group labelPlacement="start" :options="options" />

<br />

<Mdx-radio-group labelPlacement="end" :options="options" />

<br />

<Mdx-radio-group labelPlacement="fixed" :options="options" />

<br />

<Mdx-radio-group labelPlacement="stacked" :options="options" />

Justification

Developers can use the justify property to control how the label and control are packed on a line. This property mirrors the flexbox justify-content property.

<Mdx-radio-group justify="start" :options="options" />

<br />

<Mdx-radio-group justify="end" :options="options" />

<br />

<Mdx-radio-group justify="space-between" :options="options" />

Validations

You can add validations by using Vuelidate value for v-model. Validations will be automatically parsed from v$

<Mdx-radio-group v-model="v$.variable" :options="options" />

Properties

v-model

Description	You can pass simple variable to v-model as well as Vueliade v$.variable to enabling validations
Type	"Object" | "String" | "Number" | "null"
Required	true

options

Description	Array of options for the radio group
Type	"Array"
Default	[]

optionKey

Description	Defines which property from options will be used as key
Type	String
Default	key

optionValue

Description	Defines which property from options will be used as value
Type	String
Default	value

disabled

Description	If true, the user cannot interact with the radio-group.
Type	Boolean
Default	false

size

Description	Size of the radio
Type	"small" | "default"
Default	default