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

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

String

"primary"

default-value

This value will be pre-selected for the stateful component

String | Number | Boolean | Object | Array

-

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

disabled-by

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

-

error-count

Number of error messages displayed.

String | Number

1

error-messages

Error messages for the component.

Array | String

-

group-by

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"

immediate-validation

Sets the validation to be performed when the component is mounted

Boolean

false

left-label

Put the labels to the left

Boolean

false

messages

Description messages for the component.

Array | String

[]

model-value

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

-

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

text-by

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"

track-by

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"

value-by

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-model-value

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