Radio buttons

The v-radio component is a simple radio button. When combined with the v-radio-group component you can provide groupable functionality to allow users to select from a predefined set of options.

Usage

Although v-radio can be used on its own, it is best used in conjunction with v-radio-group. Using the v-model on the v-radio-group you can access the value of the selected radio button inside the group.

API

Examples

Props

Colors

Radios can be colored by using any of the builtin colors and contextual names using the color prop.

v-radio-group/prop-colors.vue

Direction

Radio-groups can be presented either as a row or a column, using their respective props. The default is as a column.

v-radio-group/prop-direction.vue

Mandatory

Radio-groups are by default not mandatory. This can be changed with the mandatory prop.

v-radio-group/prop-mandatory.vue

Slots

Label

Radio Group labels can be defined in label slot - that will allow to use HTML content.

v-radio-group/slot-label.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.