Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

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

String

"primary"

defaultValue

String | Number | Boolean | Object | Array

-

disabled

Boolean

false

disabledBy

String | Function

"disabled"

error

Boolean

-

errorCount

String | Number

1

errorMessages

Array | String

-

groupBy

String | Function

"group"

immediateValidation

Boolean

false

leftLabel

Boolean

false

messages

Array | String

[]

modelValue

String | Number | Boolean | Object | Array

-

name

String

""

options

Array

[]

preset

String

-

readonly

Boolean

false

rules

Array

[]

stateful

Boolean

false

success

Boolean

false

textBy

String | Function

"text"

trackBy

String | Function

""

type

String

"checkbox"

valueBy

String | Function

""

Events #

NameDescription

clear

update:modelValue

The event is triggered when the component needs to change the model. Is also used by 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