FormSelect ​

The VFormSelect component is a form field that allows users to select a value from a dropdown list of options.

Usage ​

Basic Usage ​

To use the VFormSelect component, you must first provide it with an array of options. Each option should be an object with text and value properties, like this:

Disabled ​

To disable the VFormSelect component, you can use the disabled prop:

Error ​

If you are using the VFormSelect component with a form validation library, you can use the error prop to indicate that the form field has an error:

Label ​

You can use the label prop to specify a label for the VFormSelect component:

Validation ​

To use the VFormSelect component with a form validation library, you can use the name prop to bind the component to a form control. For example, with VeeValidate, you can use the useForm hook to create a form with validation schema:

Validation Mode ​

There are 2 modes. The first is eager mode, and the second is aggressive mode. The eager mode validates input when the blur event occurs. Meanwhile, aggressive mode validates the input every time the input itself changes. This can be useful when you are validating for example the minimum or maximum limits of an input.

You can change the default value for this validation mode by adding an attribute or property named validation-mode to this component.

Initial Values ​

To set initial values to the form, use the initialValues option in the useForm hook.

Props ​

Events ​

update:modelValue ​

You can listen for the update:modelValue event to get notified when the value of the VFormSelect component changes.

Type:

(e: 'update:modelValue', value: string): void`

(e: 'update:modelValue', value: string): void`

Example:

<script setup lang="ts">
const onChange = () => console.log('Changed!');
</script>

<template>
  <VFormSelect @update:modelValue="onChange" />
</template>

<script setup lang="ts">
const onChange = () => console.log('Changed!');
</script>

<template>
  <VFormSelect @update:modelValue="onChange" />
</template>

Slots ​

None

CSS Variables ​

None

Standalone Installation ​

You can also install the VFormSelect component individually via @morpheme/forms package:

yarn install @morpheme/forms

yarn install @morpheme/forms

<script setup lang="ts">
import {VFormSelect} from '@morpheme/forms';
</script>

<template>
  <VFormSelect />
</template>

<script setup lang="ts">
import {VFormSelect} from '@morpheme/forms';
</script>

<template>
  <VFormSelect />
</template>

Storybook ​

View Storybook documentation here.