Input Select

Input combined with a select dropdown. Select picks an object key, input edits its value. v-model binds to the whole object. Each option can have its own mask, shortLabel, icon, regex, and currency.

Basic

{"uz":"","en":"","ru":""}

<script setup>
const form = ref({
  typeNames: { uz: '', en: '', ru: '' },
})
</script>

<template>
  <VxInputSelect
    v-model="form.typeNames"
    :options="[
      { label: 'Uzbek', value: 'uz', shortLabel: 'UZ' },
      { label: 'English', value: 'en', shortLabel: 'EN' },
      { label: 'Russian', value: 'ru', shortLabel: 'RU' },
    ]"
    placeholder="Enter name"
  />
</template>

Per-Option Mask

Each option can define its own input mask. The mask auto-switches when you pick a different option.

{"mobile":"","home":"","work":""}

<VxInputSelect
  v-model="form.phones"
  :options="[
    { label: 'Mobile', value: 'mobile', shortLabel: 'Mobile', mask: '+### ## ###-##-##' },
    { label: 'Home', value: 'home', shortLabel: 'Home', mask: '(##) ###-##-##' },
    { label: 'Work', value: 'work', shortLabel: 'Work', mask: '### (##) ###-####' },
  ]"
/>

With Icons

Options can include a Vue component as an icon.

{"mobile":"","home":"","work":""}

<script setup>
import {
  RoundedStrokeSmartPhone01Icon,
  RoundedStrokeHome09Icon,
  RoundedStrokeBriefcase01Icon,
} from 'vexel-icons'

const form = ref({
  contacts: { mobile: '', home: '', work: '' },
})
</script>

<template>
  <VxInputSelect
    v-model="form.contacts"
    :options="[
      { label: 'Mobile', value: 'mobile', shortLabel: 'Mobile', icon: RoundedStrokeSmartPhone01Icon, mask: '+### ## ###-##-##' },
      { label: 'Home', value: 'home', shortLabel: 'Home', icon: RoundedStrokeHome09Icon, mask: '(##) ###-##-##' },
      { label: 'Work', value: 'work', shortLabel: 'Work', icon: RoundedStrokeBriefcase01Icon, mask: '### (##) ###-####' },
    ]"
  />
</template>

Currency Options

Each option can define currency with prefix, suffix, thousands, decimal, and precision.

{"usd":"","eur":"","uzs":""}

<VxInputSelect
  v-model="form.prices"
  :options="[
    { label: 'US Dollar', value: 'usd', shortLabel: 'USD', currency: { prefix: '$ ', thousands: ',', precision: 2 } },
    { label: 'Euro', value: 'eur', shortLabel: 'EUR', currency: { prefix: '€ ', thousands: '.', decimal: ',', precision: 2 } },
    { label: 'UZS', value: 'uzs', shortLabel: 'UZS', currency: { suffix: ' sum', thousands: ' ', precision: 0 } },
  ]"
/>

Regex Per Option

Each option can define a regex to restrict allowed characters.

{"hex":"","alpha":"","digits":""}

<VxInputSelect
  v-model="form.codes"
  :options="[
    { label: 'Hex Code', value: 'hex', shortLabel: 'HEX', regex: /[0-9a-fA-F]/ },
    { label: 'Letters Only', value: 'alpha', shortLabel: 'ABC', regex: /[a-zA-Z]/ },
    { label: 'Digits Only', value: 'digits', shortLabel: '123', regex: /[0-9]/ },
  ]"
  placeholder="Type here..."
/>

String Options

{"uz":"","en":"","ru":""}

<VxInputSelect
  v-model="form.typeNames"
  :options="['uz', 'en', 'ru']"
  placeholder="Enter name"
/>

Select at End

{"USD":"","EUR":"","GBP":""}

<VxInputSelect
  v-model="form.prices"
  :options="['USD', 'EUR', 'GBP']"
  placeholder="0.00"
  select-position="end"
/>

Sizes

Clearable

Props

Prop	Type	Default	Description
modelValue	Record<string, string>	{}	Object with key-value pairs (v-model)
options	(string | InputSelectOption)[]	[]	Select options with label, value, shortLabel, icon, mask, regex, currency
placeholder	string	''	Input placeholder (falls back to active mask)
selectPlaceholder	string	'Select'	Select placeholder
disabled	boolean	false	Disable component
readonly	boolean	false	Readonly input
clearable	boolean	false	Show clear button
size	'sm' | 'default' | 'lg'	'default'	Component size
selectPosition	'start' | 'end'	'start'	Select position
type	string	'text'	Input type
maxlength	number	—	Max input length
autofocus	boolean	false	Auto focus on mount
mask	string	''	Global mask (per-option mask takes priority)

Option Interface

interface InputSelectOption {
  label: string             // Full label in dropdown
  value: string             // Object key
  shortLabel?: string       // Short label in trigger button
  icon?: Component          // Icon component
  mask?: string             // Per-option input mask
  regex?: RegExp            // Per-option character filter
  currency?: CurrencyOptions // Per-option currency formatting
  disabled?: boolean
}

interface CurrencyOptions {
  decimal?: string    // Decimal separator (default '.')
  thousands?: string  // Thousands separator (default ',')
  prefix?: string     // e.g. '$ '
  suffix?: string     // e.g. ' USD'
  precision?: number  // Decimal places (default 2)
}

Events

Event	Payload	Description
update:modelValue	Record<string, string>	Object updated
input	(key, value)	Input for current key
change	(key, value)	Change for current key
select	key	Key selected from dropdown
focus	FocusEvent	Input focused
blur	FocusEvent	Input blurred
clear	—	Current key value cleared