Form Radio

The <d-form-radio> component is a wrapper over Bootstrap's custom radio component.

Alias

The <d-form-radio> component is also available as <d-radio>.

Basic Demo

<template>
    <div>
        <label>Select your favorite fruits:</label>
        <d-form-radio v-model="selected" value="orange">Orange</d-form-radio>
        <d-form-radio v-model="selected" value="lemon">Lemon</d-form-radio>
        <d-form-radio v-model="selected" value="kiwi">Kiwi</d-form-radio>
        <p>Selected Status: {{ selected }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: 'orange'
        }
    }
}
</script>

<!-- radio-1.vue -->

Inline Display

Radios can also be displayed inline using the inline prop.


<div>
    <label class="d-block">Select your favorite sport</label>
    <d-form-radio inline name="fav_sport" value="basketball">Basketball</d-form-radio>
    <d-form-radio inline name="fav_sport" value="football">Football</d-form-radio>
    <d-form-radio inline name="fav_sport" value="tennis">Tennis</d-form-radio>
</div>

<!-- radio-2.vue -->

Missing Features

The following radio features are currently not supported, but available on the roadmap.

Possibility of creating plain radios.
Radio groups.
Button style radios.

Props

Prop	Description	Type	Default	Required
:name	The radio input name.	`String`		False
:id	The radio input ID.	`String`	null	False
:value	The radio input value.	`Boolean`	true	False
:disabled	The disabled state.	`Boolean`		False
:required	The required state.	`Boolean`	false	False
:checked	The checked state.	`Boolean \| String \| Array`		False
:state	The validation state.	`Boolean \| String`	null	False
:inline	Whether the radio should be displayed inline, or not.	`Boolean`	false	False