Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

Option List
#

The va-option-list component is a component to be used to group form inputs (like checkboxes and radio buttons) into a list for better control over the data.

Examples
#

Default
#

By default va-option-list will render list of checkboxes provided by options prop

Open in GitHub

Radio
#

Set type="radio" to display list radio buttons

Open in GitHub

Switch
#

Set type="switch" to display list switches

  • Option 1
  • Option 2
  • Option 3
Open in GitHub

Array of objects
#

Instead of array of strings you can provide array of objects and specify which key is for each setting.

Selected: 
[
  "Alternative value 1"
]
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
color

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

String

"primary"

defaultValue

This value will be pre-selected for the stateful component

String | Number | Boolean | Object | Array

-

dirty

Sets the dirty state of the component

Boolean

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

disabledBy

Specify the key in the object to be used as item disabled prop. Can be string (path to the key) or function of type: (option) => option.disabled

String | Function

"disabled"

error

Show component in error state.

Boolean

false

errorCount

Number of error messages displayed.

String | Number

1

errorMessages

Error messages for the component.

Array | String

[]

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

leftLabel

Put the labels to the left

Boolean

false

messages

Description messages for the component.

Array | String

[]

modelValue

The value of the v-model bindings.

String | Number | Boolean | Object | Array

-

name

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

String

""

options

The array of items to be displayed

Array

[]

preset

Named preset combination of component props.

String | Array

-

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

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

String | Function

"text"

trackBy

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

String | Function

""

type

Specify the format of component. Supported types are "radio", "checkbox" and "switch"

String

"checkbox"

valueBy

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

String | Function

""

Events #

NameDescription

clear

update:dirty

Fires when the dirty state changes

update:error

Fires when the error state changes

update:errorMessages

Fires when the error messages change

update:loading

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

Slots #

NameDescription

default

Used to render items. Available props are: option: String | Object, isDisabled: Boolean, name: String, color: String, leftLabel: Boolean, getText: (option: String | Object) => String, selectedValue: Array<String | Object>, index: Number

Css Variables #

NameDefault Value
--va-option-list-line-height 1.5