You have to wrap them on a Field.
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>
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-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 | — |
Radio 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 |
This page is open source. Noticed a typo or something's unclear?