Radio

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

Basic

The v-radio component is a simple radio button.

Radio 1

Radio 2

Colors

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

Inline

Use inline prop to displays radio buttons in row.

Option 1

Option 2

Option 1

Option 2

Density

Use density prop to adjusts the spacing within the component. Available options are: default, comfortable, and compact.

Option 1

Option 2

Option 1

Option 2

Label slot

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

Your favorite search engine

Of course it's Google

Definitely DuckDuckGo

Icon

Use false-icon and true-icon prop to set icon on inactive and active state.

Radio 1

Radio 2

Validation

Use rules prop to validate a radio. Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message.

Radio 1

Radio 2

Radio 3

Radio

Basic

Colors

Inline

Density

Label slot

Icon

Validation

CONTENTS