Radio
#

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

Examples
#

Default
#

Default usage of the va-radio component. Make sure to add a name prop to group them together.

Open in GitHub

Multiple Options
#

You can use options prop to pass an array of options to the component. Then multiple components will be rendered.`

Open in GitHub

You can use more complex options with textBy and valueBy props if needed.

Value:
Open in GitHub

Passing multiple options at the same time allows you to use validation rules.

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.

Open in GitHub

Disabled
#

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

Open in GitHub

Slot
#

You can use default slot to pass a custom content as text to the component. You can also change icon appearance with icon slot.

Open in GitHub

Accessibility
#

Each option has radio role attribute. If options prop is used the component has a radiogroup role attribute, otherwise you need to add role="radiogroup" on parent element manually.

aria-checked is applied on option automatically.

Always set name prop on the component to group options together for correct keyboard navigation.

Set aria-label or aria-labelledby attribute on the component to provide a label for screen readers for radio-group if needed. By default radio element labeled by text from option.

API
#

Props #

NameDescriptionTypesDefault
arrayValue

Same as native value. It is used with v-model of an array type.

String | Boolean | Object | Number

null

color

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

String

"primary"

dirty

Boolean

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

disabledBy

This prop is used to get the disabled state of the option if option is an object

String | Function

"disabled"

error

Show component in error state.

Boolean

-

errorCount

Number of error messages displayed.

String | Number

1

errorMessages

Error messages for the component.

Array | String

-

falseValue

Overrides the returned value when it's not checked.

any

false

groupBy

When options prop is an object, this key will be used to group up options. Can be string (path to the key) or function of type: (option) => option.group

String | Function

"group"

immediateValidation

Sets the validation to be performed when the component is mounted

Boolean

false

indeterminate

Same as native indeterminate - a state in which it's impossible to say whether the item is toggled on or off

Boolean

false

indeterminateValue

Overrides a state value that is not set.

any

null

label

Same as native label.

String

-

leftLabel

Moves the label on the left of a component.

Boolean

false

loading

Indicates that something is loading (spinner icon).

Boolean

false

messages

Description messages for the component.

Array | String

[]

modelValue

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

Object | String | Number

-

options

Array of options to be rendered

Array

[]

preset

Named preset combination of component props.

String

-

readonly

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

Boolean

false

rules

Validation rules .

Array

[]

stateful

Add possibility to work with component without setting v-model.

Boolean

false

success

Show component in success state.

Boolean

false

textBy

This prop is used to get the text of the option if option is an object

String | Function

"text"

trackBy

In case there are options with the same value, to distinguish them you can use this prop

String | Function

""

trueValue

Overrides the returned value when it's checked.

any

true

valueBy

This prop is used to get the value of the option if option is an object. If not provided, the option itself will be used as a value

String | Function

""

vertical

Boolean

false

Events #

NameDescription

blur

On blur.

focus

On focus.

update:dirty

update:error

update:errorMessages

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

Css Variables #

NameDefault Value
--va-radio-display inline-flex
--va-radio-cursor pointer
--va-radio-position relative
--va-radio-gap 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-background transparent
--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 var(--va-form-element-border-width)
--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

Change log #

v1.8.0
  • Radio have outlined style by default

  • Add preset="solid"

v1.7.0
  • Added validation and options prop