Selection control components allow a user to select options. These components must be used with the v-model prop as they do not maintain their own state.

API

v-radio-group

Examples

Checkboxes - Boolean

Checkboxes - Array

Checkboxes - States

Checkboxes - Colors

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

Checkboxes - Inline with a textfield

Radios - Default

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

Radios - Direction

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

Radios - Colors

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

Switches - Boolean

Switches - Array

Switches - States

Switches - Colors

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

Switches - Flat

You can make switch render without elevation of thumb using flat property.

Label slot

Selection controls' labels can be defined in label slot - that will allow to use HTML content

Edit this page | language on Github