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.

Updated on v2.0.0

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.

Single color

Orange

Apple

Pineapple

Grape

---

Different Color

Red

Green

Blue

Purple

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

CSS Variables

Added since v2.0.0

--md-radio-margin: .5rem 1rem .5rem 0;
--md-radio-size: 20px;
--md-radio-stroke: 2px;
--md-radio-touch-size: 40px;
--md-radio-disabled-bg: transparent;
--md-radio-disabled-opacity: calc(var(--md-field-disabled-opacity) - .2);

--md-radio-color: currentColor;
--md-radio-active-color: #{$color};

API Reference

BsRadio

Property	Type	Default	Description
color	String	'default'	The component's color appearance. Any MDBootstrap Color variants and Material Color variants can be used.
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	'default'	The component's color appearance. Any MDBootstrap Color variants and Material Color variants can be used.
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.
external-validator deprecated	TValidator		Use validator instead.
help-text	String		The help text to display below the component.
items required	TRadioProps[]		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	Boolean	true	Keeps help text visible when the component is not focused.
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 More details, see Text Field - TValidator

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.

TRadioProps

The TRadioProps has properties as described below:

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