CataUiInputSelect

A customizable select dropdown component that supports single and multiple selection, color/image previews, search functionality, and more.

Colors

Select

Multi

<CataUiInputSelect label="Colors" :options="optionsColor" v-model="color" />
<CataUiInputSelect tooltip="Tooltip" label="Select" :options="options" v-model="myValue" />
<CataUiInputSelect label="Multi" multipleSelect selectAllEnabled :options="options" v-model="multi" />

Props

Prop	Description	Type	Default	Required
allowEmpty	Allows deselection in single select mode	Boolean	true	false
disabled	Disables the dropdown and its items	Boolean	false	false
error	Displays the string as an error message	String	''	false
label	The text label displayed above the input	String	''	false
loading	Shows a loading spinner when options are being loaded	Boolean	false	false
multipleSelect	Enables multiple selection (v-model must be array)	Boolean	false	false
options	Array of objects with value, label, and optional previewValue	Array		true
required	Displays a required indicator (*) next to the label	Boolean	false	false
selectAllEnabled	Enables "Select All" and "Remove All" buttons in multipleSelect mode	Boolean	false	false
tooltip	Tooltip text displayed when hovering over an info icon	String	''	false
v-model	Selected value(s) - bound using two-way binding	Array/String/Number/null		true

Features

Single and Multiple Selection: Choose between single-item or multiple-item selection modes
Search Functionality: Automatically enables search for large option lists (more than 10 items)
Visualization: Support for color previews (hex values) and image previews
Select All/Remove All: Optional buttons for bulk selection/deselection in multiple mode
Keyboard Navigation: Full keyboard support for accessibility
Custom Styling: Supports standard error states, disabled states, and loading indicators

Options Format

The component accepts an array of option objects with the following structure:

// Basic options
const options = [
    {
        value: 'analytics', // This value will be used in v-model
        label: 'Analytics', // This text will be displayed in the dropdown
    },
    // More options...
]

// Options with visual previews
const optionsWithPreview = [
    {
        value: 'red',
        label: 'Red',
        previewValue: '#f00' // Hex color value for color preview
    },
    {
        value: 'logo',
        label: 'Company Logo',
        previewValue: '/images/logo.png' // Image path for image preview
    },
]

Usage Examples

<template>
    <!-- Basic single select -->
    <CataUiInputSelect 
        label="Select Item" 
        :options="options" 
        v-model="selectedValue" />
    
    <!-- With color previews -->
    <CataUiInputSelect 
        label="Colors" 
        :options="colorOptions" 
        v-model="selectedColor" />
    
    <!-- Multiple select with all options -->
    <CataUiInputSelect 
        label="Select Multiple Items" 
        multipleSelect 
        selectAllEnabled 
        :options="options" 
        v-model="selectedItems" />
        
    <!-- With loading state -->
    <CataUiInputSelect 
        label="Loading Example" 
        :options="loadingOptions" 
        v-model="selectedValue"
        :loading="isLoading" />
        
    <!-- With error state -->
    <CataUiInputSelect 
        label="Required Field" 
        :options="options" 
        v-model="selectedValue"
        required
        :error="validationError" />
</template>

<script setup>
    import { ref } from 'vue';
    
    // For single select
    const selectedValue = ref('');
    
    // For color select
    const selectedColor = ref('');
    
    // For multiple select (must be an array)
    const selectedItems = ref([]);
    
    // Basic options example
    const options = [
        { value: 'brief', label: 'Brief' },
        { value: 'analytics', label: 'Analytics' },
        { value: 'toolbox', label: 'Toolbox' },
        { value: 'visualize', label: 'Visualize' },
    ];
    
    // Options with color/image previews
    const colorOptions = [
        { value: 'white', label: 'White', previewValue: '#fff' },
        { value: 'catalyst', label: 'Catalyst', previewValue: '/images/nav.png' },
        { value: 'red', label: 'Red', previewValue: '#f00' },
        { value: 'yellow', label: 'Yellow', previewValue: '#ff0' },
    ];
    
    // Example loading and validation states
    const isLoading = ref(false);
    const validationError = ref('This field is required');
</script>

Events

The component uses Vue's v-model for two-way data binding, so it automatically emits the 'update:modelValue' event when the selection changes.

Slots

The component doesn't provide custom slots - all content is generated based on the provided options array.