Skip to main content
The InputSelect.vue component is a reusable Vue.js Composition API component for creating select dropdowns. It supports various configurations for options, including arrays, objects, and shaped data, making it versatile for different use cases.

​
Features

Dynamic Options

Accepts both arrays and objects as data sources for dropdown options.

Data Shaping

Supports key-value mapping for custom option structures.

Nullable Options

Allows the inclusion of an empty option in the dropdown.

Customizable Label

Displays a label for the select dropdown.

Multiple Select

Works with multiple selection.

​
Usage

​
Basic Example

import { InputSelect } from '@robojuice/velure-ui';

<InputSelect label="Select" :options="[1, 2, 3]" />

​
Multiple Select

<InputSelect multiple label="Select" :options="[1, 2, 3]" />

​
Disabled Select

<InputSelect
  label="Select"
  :options="[1, 2, 3]"
/>

​
Object Options with Shape

<InputSelect
  v-model="selectedOption"
  label="Select a state"
  :options="[{id: 'CA', name: 'California'}, {id: 'NY', name: 'New York'}]"
  :shape="{ value: 'id', text: 'name' }"
/>

​
Props

​
v-model
string | number | object
default:"undefined"
The value bound to the selected option.
​
type
string
default:"'text'"
The input type (not commonly used with this component).
​
options
array | object
default:"undefined"
The data source for the dropdown options.
​
shape
object
default:"{}"
Defines the keys for mapping option values (value) and labels (text).
​
width
number | string
default:"100"
The width of the component as a percentage.
​
label
string
default:"''"
The label displayed above the select element.
​
error
string
default:"null"
Displays an error message and applies error styling when provided.
​
labelEmpty
string | boolean
default:"''"
Text for the empty option (false disables the empty option).
​
nullable
boolean
default:"false"
Allows an empty value option if set to true.

​
Example Use Cases

​
Reactive Selection

Bind the selected value using v-model: 
<template>
  <InputSelect
    v-model="selectedOption"
    label="Select an option"
    :options="[1, 2, 3]"
  />
</template>

<script setup>
import { ref } from 'vue';

const selectedOption = ref('');
</script>

​
Notes

  • The labelEmpty prop can provide a placeholder or empty selection option, e.g., labelEmpty="Select one".
  • The nullable prop must be set to true if you want the empty option to be selectable.
  • Supports two-way data binding with v-model for dynamic updates.