Shards Vue


    Form Radio

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


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

    Basic Demo

            <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>
    export default {
        data() {
            return {
                selected: 'orange'
    <!-- radio-1.vue -->

    Inline Display

    Radios can also be displayed inline using the inline prop.

        <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>
    <!-- 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.


    :nameThe radio input name.StringFalse
    :idThe radio input ID.StringnullFalse
    :valueThe radio input value.BooleantrueFalse
    :disabledThe disabled state.BooleanFalse
    :requiredThe required state.BooleanfalseFalse
    :checkedThe checked state.Boolean | String | ArrayFalse
    :stateThe validation state.Boolean | StringnullFalse
    :inlineWhether the radio should be displayed inline, or not.BooleanfalseFalse