Radio
#

The va-radio allows the user to select one option from a set.

Examples
#

Default
#

Default usage of the va-radio component.

Selected: one
Open in GitHub

Colors
#

With color prop you can change the color of the component.

Open in GitHub

Custom Labels
#

You can add a label text by setting the label property. To switch label side use left-label property.

Selected: one
Open in GitHub

Disabled
#

With disabled prop you can disable a user interaction with va-radio component.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
color

String

"primary"

disabled

Boolean

false

label

String

""

leftLabel

Boolean

false

modelValue

Boolean | Array | String | Object | Number

null

name

String

""

option

String | Boolean | Object | Number

null

preset

String

-

readonly

Boolean

false

tabindex

String | Number

0

Events #

NameDescription

focus

On focus.

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Css Variables #

NameDefault Value
--va-radio-display inline-flex
--va-radio-cursor pointer
--va-radio-position relative
--va-radio-margin-top 0
--va-radio-margin-right 0.5rem
--va-radio-transition 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)
--va-radio-disabled-cursor default
--va-radio-border-color var(--va-background-border)
--va-radio-icon-transition 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)
--va-radio-icon-width 1.4rem
--va-radio-icon-height 1.4rem
--va-radio-icon-border-radius 100%
--va-radio-icon-border var(--va-background-border) solid 0.125rem
--va-radio-dot-transition 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)
--va-radio-dot-top 50%
--va-radio-dot-left 50%
--va-radio-dot-right 50%
--va-radio-dot-bottom 50%
--va-radio-dot-border-radius 100%
--va-radio-dot-background-color inherit
--va-radio-dot-opacity 0
--va-radio-background-transition 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)
--va-radio-background-top -0.35rem
--va-radio-background-left -0.35rem
--va-radio-background-right -0.35rem
--va-radio-background-bottom -0.35rem
--va-radio-background-background-color var(--va-background-element)
--va-radio-background-border-radius 100%
--va-radio-background-z-index 0
--va-radio-background-opacity 0
--va-radio-text-display inline-flex
--va-radio-text-margin-left 0.5rem
--va-radio-text-margin-right 0