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

Color of the component (theme string or HEX string).

String

"primary"

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

label

Same as native label.

String

""

left-label

Moves the label on the left of a component.

Boolean

false

model-value

The value of the v-model bindings.

Boolean | Array | String | Object | Number

null

name

Applies name to internal input component. Useful for native forms.

String

""

option

Option value that model is updated to when an option is selected

String | Boolean | Object | Number

null

preset

Named preset combination of component props.

String

-

readonly

Doesn't look disabled, but acts like one. Mostly useful for wrapper components.

Boolean

false

tabindex

Sets a custom tabindex

String | Number

0

Events #

NameDescription

focus

On focus.

update-model-value

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