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
Radio #
Set type="radio"
to display list radio buttons
Switch #
Set type="switch"
to display list switches
Array of objects #
Instead of array of strings you can provide array of objects and specify which key is for each setting.
[ "Alternative value 1" ]
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
color | Color of the component (theme string or |
|
|
default-value | This value will be pre-selected for the stateful component |
| - |
disabled | Applies |
|
|
disabled-by | Specify the key in the object to be used as item |
|
|
error | Show component in error state. |
| - |
error-count | Number of error messages displayed. |
|
|
error-messages | Error messages for the component. |
| - |
group-by | When |
|
|
immediate-validation | Sets the validation to be performed when the component is mounted |
|
|
left-label | Put the labels to the left |
|
|
messages | Description messages for the component. |
|
|
model-value | The value of the |
| - |
name | Applies |
|
|
options | The array of items to be displayed |
|
|
preset | Named preset combination of component props. |
| - |
readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
|
|
rules | Validation rules . |
|
|
stateful | Add possibility to work with component without setting |
|
|
success | Show component in success state. |
|
|
text-by | When |
|
|
track-by | When |
|
|
type | Specify the format of component. Supported types are |
|
|
value-by | When |
|
|
Events #
Name | Description |
---|---|
clear | |
update-model-value | The event is triggered when the component needs to change the model. Is also used by |
Slots #
Name | Description |
---|---|
default | Used to render items. Available props are:
|
Css Variables #
Name | Default Value |
---|---|
--va-option-list-line-height | 1.5 |