Select Input

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

string | number | object

default:"undefined"

The value bound to the selected option.

string

default:"'text'"

The input type (not commonly used with this component).

array | object

default:"undefined"

The data source for the dropdown options.

object

default:"{}"

Defines the keys for mapping option values (value) and labels (text).

number | string

default:"100"

The width of the component as a percentage.

string

default:"''"

The label displayed above the select element.

string

default:"null"

Displays an error message and applies error styling when provided.

string | boolean

default:"''"

Text for the empty option (false disables the empty option).

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.

Setup

Foundations

Inputs

Features

Dynamic Options

Data Shaping

Nullable Options

Customizable Label

Multiple Select

Usage

Basic Example

Multiple Select

Disabled Select

Object Options with Shape

Props

Example Use Cases

Reactive Selection

Notes

​Features

Dynamic Options

Data Shaping

Nullable Options

Customizable Label

Multiple Select

​Usage

​Basic Example

​Multiple Select

​Disabled Select

​Object Options with Shape

​Props

​Example Use Cases

​Reactive Selection

​Notes

Features

Usage

Basic Example

Multiple Select

Disabled Select

Object Options with Shape

Props

Example Use Cases

Reactive Selection

Notes