Radio

Select an option from a set

Flint Silver Jack Vane

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

Small

Default

Medium

Large

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

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

# Types

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

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

# Radio Button

You have to wrap them on a Field.

Nope

Yep

Default

Disabled

Selection:

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

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

            <b-radio-button v-model="radioButton"
                native-value="Default"
                type="is-primary is-light is-outlined">
                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-model`	Binding value	Any	—	—
`native-value`	Same as native `value`	Any	—	—
`disabled`	Same as native `disabled`	Boolean	—	`false`
`required`	Same as native `required`	Boolean	—	`false`
`name`	Same as native `name`	String	—	—
`size`	Size of the control, optional	String	`is-small`, `is-medium`, `is-large`	—
`type`	Type (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	—

Name	Description	Parameters
`input`	Triggers when the value of checkbox is changed	`value: Boolean`
`[any].native`	Listen to any event using this syntax, e.g `click.native`	`event: $event`

Button

Name	Description	Type	Values	Default
`v-model`	Binding value	Any	—	—
`native-value`	Same as native `value`	Any	—	—
`type`	Type (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 Sass	`is-primary`
`disabled`	Same as native `disabled`	Boolean	—	`false`
`name`	Same as native `name`	String	—	—
`size`	Size of the button, optional	String	`is-small`, `is-medium`, `is-large`	—
`expanded`	Radio 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-size`	`1.25em`
`$radio-colors`	`$form-colors`

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

Improve this page on GitHub