Radio Button

BsRadio is a component that let users select one option from a set of options.

Overview

BsRadio component mimics the HTML5 <input type="radio"> element. This means that you can add attributes like required, readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property.

Select an option

Option 1

Option 2

Option 3

Value:

Radio Group

BsRadioGroup is a collection of BsRadio. Rather than create multiple <bs-radio>, it's better to create single <bs-radio-group>. <bs-radio-group> can be integrated with external validator plugin such as Vuelidate.

Select a color

Red

Green

Blue

Purple

Selected color:

---

Select a fruit

Orange

Apple

Pineapple

Grape

Selected fruit:

INFO

<bs-radio-group> will be displayed in one column if the media query matches (max-width: 575px). And if the media query matches (min-width: 576px) it will try to fit up to four columns.

Multi Column

With <bs-radio-group>, collection of <bs-radio> can be arranged in multi-columns. When the number of <bs-radio> exceed the number of maximum columns, then the remaining <bs-radio> will be placed on the next row.

Multi Column

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Selected item:

INFO

Multi columns are closely tied to the bootstrap class col-lg-*. Which means if the media query matches (min-width: 992px), it will be displayed correctly. And if the media query matches (min-width: 768px), it will be displayed in two columns only.

Colors

Use color property to change <bs-radio> or <bs-radio-group> color appearance. Additionally, you can set each radio of <bs-radio-group> to have different color.

Updated in v2.2.0

Single color

Orange

Apple

Pineapple

Grape

---

Different Color

Primary

Success

Danger

Warning

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-radio for better customization.

Updated in v2.2.0

.md-radio {
  --md-radio-size: #{vars.$radio-size};
  --md-radio-touch-size: #{vars.$radio-touch-size};
  --md-radio-stroke: #{vars.$radio-stroke};
  --md-radio-margin: #{vars.$radio-margin};

  --md-radio-color: currentColor;
  --md-radio-active-color: #{$color};
  --md-radio-disabled-bg: transparent;
  --md-radio-disabled-opacity: var(--md-field-disabled-opacity);
}

API Reference

BsRadio

Property	Type	Default	Description
color	String	'default'	The component's color appearance. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger and info.
disabled	Boolean	false	Enable/disable the component and the <input> element.
id	String		Sets the <input> element ID attribute. This property value is auto generates.
model-value v-model	String|Number|Boolean		The radio button value monitored by v-model to maintain checked state. v2.0.0
name	String		Sets the <input> element name attribute.
readonly	Boolean	false	Put the component in readonly state and sets the <input> element readonly attribute.
required	Boolean	false	Sets the <input> element required attribute.
value required	String|Number|Boolean		The <input> element value attribute.

Name	Arguments	Description
checked	(state:Boolean)	Triggers after the radio button state changed. v2.0.0
update:model-value	(value:String|Number|Boolean)	Used to update the model-value property. v2.0.0

Name	Description
default	The outlet slot used to place the field label.

BsRadioGroup

Property	Type	Default	Description
color	String		The component's color appearance. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger and info.
column	Number		Sets the maximum number of columns to display the radio button.v2.0.0 When the number of items exceed the number of columns, then the remaining items will be displayed on the next row.
disabled	Boolean	false	Enable/disable the component.
help-text	String		The help text to display below the component.
items required	TRadioInputProps[]		The configuration option to construct the <bs-radio>.
model-value v-model	String|Number		The component value monitored by v-model to maintain checked state. v2.0.0
name	String		Sets default <input> element name attribute.
persistent-help-text deprecated	Boolean	true	Use persistent-help-off instead. Updated in v2.2.0
persistent-help-off	Boolean	false	Prevents help text from being visible when the component is not focused. v2.2.0
readonly	Boolean	false	Put the component in readonly state and sets the <input> element readonly attribute.
required	Boolean	false	Sets the <input> element required attribute.
validator	TValidator		The configuration options to integrate external validator plugin to validate this field value. v2.0.0 See Text Field - TValidator for more details.

Name	Arguments	Description
update:model-value	(value:String|Number)	Used to update the model-value property. v2.0.0

Name	Description
default	The outlet slot used to place the component label.

TRadioInputProps

Property	Type	Description
value required	String|Number	The <bs-radio> value.
label required	String	The <bs-radio> label.
color	String	The <bs-radio> color appearance. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger and info.
disabled	Boolean	Create <bs-radio> in disabled state.
readonly	Boolean	Create <bs-radio> in readonly state.
id	String	Sets the <bs-radio> element ID attribute. This property value is auto generates.
name	Boolean	Sets the <bs-radio> element name attribute.