Radio switch

A radio switch is a container for a switch 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 switch unchecks any previous checked radio button within the same switch.

Examples

Basic Usage

<Mdx-radio-switch :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-switch labelPlacement="start" :options="options" />

<br />

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

<br />

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

<br />

<Mdx-radio-switch 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-switch justify="start" :options="options" />

<br />

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

<br />

<Mdx-radio-switch 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-switch 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 switch
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-switch.
Type	Boolean
Default	false

size

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