Select

Select allows users to pick a value from a set of predefined options. Supports single select, multi-select, disabled options, and input group modes.

Basic Usage

Two-way binding via v-model. The options prop accepts object arrays { value, label } or plain string/number arrays.

Show Code

<TSelect :options="fruitOptions" placeholder="Select a fruit"/>
<TSelect :options="cityOptions" placeholder="Select a city"/>

Sizing

Use the size prop to control the select size: 'lg' (large), default (medium), 'sm' (small).

Show Code

<TSelect size="lg" :options="fruitOptions" placeholder="Large"/>
<TSelect :options="fruitOptions" placeholder="Default"/>
<TSelect size="sm" :options="fruitOptions" placeholder="Small"/>

States

Supports disabled and validation states. Pair with .valid-feedback / .invalid-feedback for validation messages.

Show Code

<TSelect disabled :options="fruitOptions" placeholder="Disabled"/>
<TSelect validation="valid" :options="fruitOptions" placeholder="Valid"/>
<div class="valid-feedback">Looks good!</div>

<TSelect validation="invalid" :options="fruitOptions" placeholder="Invalid"/>
<div class="invalid-feedback">Please select an option.</div>

Option Disabled

Use the disabled field in option objects to disable specific options.

Show Code

<TSelect :options="[
  { value: 'opt1', label: 'Option 1' },
  { value: 'opt2', label: 'Option 2' },
  { value: 'opt3', label: 'Option 3 (disabled)', disabled: true },
  { value: 'opt4', label: 'Option 4' },
]" placeholder="Select..." />

Multi-Select

Set multiple to enable multi-select mode. The v-model binding value becomes an array.

Show Code

<TSelect multiple :options="cityOptions" />

Input Groups

Use prepend-text / append-text to add text prefixes/suffixes, or use #prepend / #append slots for custom content.

Show Code

<TSelect prepend-text="Protocol" :options="['HTTP', 'HTTPS', 'FTP']"/>
<TSelect append-text="USD" :options="['100', '200', '500']"/>
<TSelect placeholder="Select action">
  <template #prepend>
    <span class="input-group-text">Action</span>
  </template>
  <option value="view">View</option>
  <option value="edit">Edit</option>
</TSelect>

Custom Options

When neither the options prop nor the default slot is provided, the select renders with no options. Use the default slot to pass native <option> elements for complete customization.

Two-Way Binding

v-model supports string, number, and string[] (for multi-select) types.

Show Code

<script setup lang="ts">
  import { ref } from 'vue'
  const value = ref('')
</script>
<template>
  <p>Current value: {{ value }}</p>
  <TSelect v-model="value" :options="cityOptions" placeholder="Select a city" />
</template>

API

TSelect Props

Prop	Description	Type	Default
options	Option array (objects or strings/numbers)	(SelectOption | string | number)[]	undefined
placeholder	Placeholder text	string	undefined
size	Select size	'sm' | 'lg'	undefined
disabled	Disabled state	boolean	false
multiple	Multi-select mode	boolean	false
validation	Validation state	'valid' | 'invalid'	undefined
block	Full width (w-100)	boolean	false
name	Native name attribute	string	undefined
id	Native id attribute	string	undefined
required	Whether required	boolean	false
prepend-text	Prepend text	string	undefined
append-text	Append text	string	undefined

TSelect Option Type (SelectOption)

interface SelectOption {
  value: string | number
  label: string
  disabled?: boolean
}

TSelect Emits

Event	Description	Callback
update:modelValue	Triggered when selected value changes	(value: string | number | string[]) => void

TSelect Slots

Slot	Description
default	Custom option content (native <option> / <optgroup>)
prepend	Prepend content (replaces prepend-text), appears before <select>
append	Append content (replaces append-text), appears after <select>