Select

The select input type is used for dropdown selection from a predefined list of options. It provides a searchable dropdown interface with keyboard navigation and supports both static options and dynamic data loading.

<template>
    <VsInputSelect v-model="selectValue" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
import { VsInputSelect } from '@opengis/form'

const selectValue = ref('');
const options = [
  { id: 'option1', text: 'Option 1' },
  { id: 'option2', text: 'Option 2' }
];
</script>

Оберіть значення

Basic Select Input

<VsInputSelect v-model="selectValue" :options="options" />

{
  name: 'experience',
  type: 'Select',
  label: 'Experience Level',
  placeholder: 'Select experience level',
  options: [
    { id: 'beginner', text: 'Beginner' },
    { id: 'intermediate', text: 'Intermediate' },
    { id: 'advanced', text: 'Advanced' },
    { id: 'expert', text: 'Expert' }
  ]
}

Select experience level

Select with Colors

<VsInputSelect v-model="selectValue" :options="options" />

{
  name: 'priority',
  type: 'Select',
  label: 'Priority Level',
  placeholder: 'Select priority',
  options: [
    { id: 'low', text: 'Low Priority', color: '#3b82f6' },
    { id: 'medium', text: 'Medium Priority', color: '#10b981' },
    { id: 'high', text: 'High Priority', color: '#f59e0b' },
    { id: 'critical', text: 'Critical', color: '#ef4444' }
  ]
}

Select priority

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'select'
• label (string): Display label for the field
• options (array): Array of option objects

Optional Properties

• placeholder (string): Hint text shown when field is empty
• searchable (boolean): Whether the select is searchable
• multiple (boolean): Whether multiple selections are allowed
• disabled (boolean): Whether the field is disabled
• rules (array): Validation rules
• conditions (object): Conditional display logic

Option Object Structure

interface IOption {
  id: number | string;
  text: string;
  color?: string;
  disabled?: boolean;
}

Schema Interface

interface SelectSchemaItem {
  name: string;
  type: 'select';
  label: string;
  options: IOption[];
  placeholder?: string;
  searchable?: boolean;
  multiple?: boolean;
  disabled?: boolean;
  rules?: (string | object)[];
  conditions?: Conditions | Conditions[];
}

Best Practices

1. Use descriptive option text that clearly explains each choice
2. Keep options concise but informative
3. Use searchable select for long option lists (10+ items)
4. Provide a clear placeholder that explains what to select
5. Use colors sparingly to highlight important options
6. Group related options logically
7. Use consistent naming for option IDs
8. Consider accessibility with clear labels and descriptions
9. Limit options to prevent overwhelming users
10. Use multiple select only when truly necessary