Radio NEW ​

Single selection among multiple options.

Basic usage ​

Radio should not have many options. Otherwise, use the Select component instead.

Creating a radio component is easy, just bind a variable to Radio's v-model. It equals to the value of label of the chosen radio. Labels can be a String, Number or Boolean.

Disabled ​

The disabled attribute is used to disable the radio.

You just need to add the disabled attribute.

Radio button group ​

Suitable for choosing from mutually exclusive options.

Combine o-radio-group with o-radio to display a Radio group. Bind a variable with v-model of the o-radio-group element and set the label value in o-radio. It also provides the change event with the current value as its parameter.

With borders ​

The border attribute adds a border to Radios.

Sizes ​

Besides the default size, Radio provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with xs, sm, md, lg.

Colors ​

You can change the checked color with the fill prop.

Text Colors ​

You can individually set the color of the text with the text-color prop when the radio button is selected.

Label Colors ​

You can set the color of the label text with the label-color prop.

If you do not want label's color to change when selected, you can use the not-text-color prop.

Radio API ​

Radio Props ​

Radio Methods ​

Radio Slots ​

RadioGroup API ​

RadioGroup Props ​

RadioGroup Methods ​

RadioGroup Slots ​