FormInputSelect since v0.13.0

A select element wrapped inside a labelled form element. The select element at the moment is a plain HTML element. The options elements will be generated at runtime based on the elements prop, which is expected to be an array. The expected format of the array items is { id: 'uniqueIdString', name: 'label'}.

The element supports the Vue.js v-model directive. On input the directive will be updated with the index of selected element.

Similar to v-for it depends on knowing the unique attribute of each element. Thus, the prop track-by can be set to the key that can be used to track and identify distinct elements. By default the value of the id attribute is tracked.

Preview

Component Value: 1

Properties

Name
Type
Default
Value
description
String
disabled
Boolean
false
elements
Array
() => { return []; }
forceShowErrorMessage
Boolean
false
id
String
label
String
modelValue
Number
trackBy
String
id

Emits

Event
update:modelValue

Example

<template>
    <FormInputSelect 
      id="demoSelect" 
      label="Label"
      description="Showcases the select element" 
      :elements="[{ id: '1', name: 'First Element' }, { id: '2', name: 'Second Element' }]">
    </FormInputSelect>
</template>

<script setup>
import { FormInputSelect } from '@discue/ui-components'
</script>
Improve this page
Last Updated:
Contributors: Stefan Pfaffel