Radio

Select an option from a set

Selection: Jack

<template>
    <section>
        <div class="block">
            <b-radio v-model="radio"
                name="name"
                native-value="Flint">
                Flint
            </b-radio>
            <b-radio v-model="radio"
                name="name"
                native-value="Silver">
                Silver
            </b-radio>
            <b-radio v-model="radio"
                name="name"
                native-value="Jack">
                Jack
            </b-radio>
            <b-radio v-model="radio"
                name="name"
                native-value="Vane"
                disabled>
                Vane
            </b-radio>
        </div>
        <p class="content">
            <b>Selection:</b>
            {{ radio }}
        </p>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                radio: 'Jack'
            }
        }
    }
</script>

# Sizes

<template>
    <section>
        <div class="field">
            <b-radio v-model="radio"
                size="is-small"
                native-value="small">
                Small
            </b-radio>
        </div>
        <div class="field">
            <b-radio v-model="radio"
                native-value="default">
                Default
            </b-radio>
        </div>
        <div class="field">
            <b-radio v-model="radio"
                size="is-medium"
                native-value="medium">
                Medium
            </b-radio>
        </div>
        <div class="field">
            <b-radio v-model="radio"
                size="is-large"
                native-value="large">
                Large
            </b-radio>
        </div>
    </section>
</template>

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

# Types

<template>
    <section>
        <div class="field">
            <b-radio v-model="radio"
                native-value="default">
                Default
            </b-radio>
        </div>
        <div class="field">
            <b-radio v-model="radio"
                native-value="info"
                type="is-info">
                Info
            </b-radio>
        </div>
        <div class="field">
            <b-radio v-model="radio"
                native-value="success"
                type="is-success">
                Success
            </b-radio>
        </div>
        <div class="field">
            <b-radio v-model="radio"
                native-value="danger"
                type="is-danger">
                Danger
            </b-radio>
        </div>
        <div class="field">
            <b-radio v-model="radio"
                native-value="warning"
                type="is-warning">
                Warning
            </b-radio>
        </div>
    </section>
</template>

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

# Radio Button

You have to wrap them on a Field.

Selection:

<template>
    <section>
        <b-field>
            <b-radio-button v-model="radioButton"
                native-value="Nope"
                type="is-danger">
                <b-icon icon="close"></b-icon>
                <span>Nope</span>
            </b-radio-button>

            <b-radio-button v-model="radioButton"
                native-value="Yep"
                type="is-success">
                <b-icon icon="check"></b-icon>
                <span>Yep</span>
            </b-radio-button>

            <b-radio-button v-model="radioButton"
                native-value="Default">
                Default
            </b-radio-button>

            <b-radio-button v-model="radioButton"
                native-value="Disabled"
                disabled>
                Disabled
            </b-radio-button>
        </b-field>
        <p class="content">
            <b>Selection:</b>
            {{ radioButton }}
        </p>
    </section>
</template>

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

# API

Radio

Name
Description
Type
Values
Default
v-modelBinding value Any
native-valueSame as native value Any
disabledSame as native disabled Boolean false
requiredSame as native required Boolean false
nameSame as native name String
sizeSize of the control, optional String is-small, is-medium, is-large
typeType (color) of the control, optional String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass

Radio Button

Name
Description
Type
Values
Default
v-modelBinding value Any
native-valueSame as native value Any
typeType (color) of the button when checked String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-primary
disabledSame as native disabled Boolean false
nameSame as native name String
sizeSize of the button, optional String is-small, is-medium, is-large
expandedRadio button will be expanded (full-width) Boolean false

# Variables

You can use these variables to customize this component.

Name
Default
$radio-active-background-color$primary
$radio-size1.25em

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub