VSelect is a select component that can be used to display a native html <select>. It extends the VFormGroup component, which means it can use all the features of VFormGroup.

<VSelect v-model="annimal" name="select" label="Select with array string" :options="['Dog', 'Cat']" placeholder="Select an animal" />


The options prop is an array of options to display in the select element. Each option can be a simple string or a key-value object.

If the options are an array of key-value objects, labelKey and valueKey props can be used to define which keys should be used to display the options labels and values. By default, labelKey is set to `label``. If no valueKey is provided, VSelect will set the v-model value as the entire option value.

<VSelect name="select-object" label="Select with array of object" :options="[{ value: 'Dog', label: 'This is a dog' }, { value: 'Cat', label: 'This is a cat' }]" value-key="value" placeholder="Select an animal"/>

In this example, the options prop is an array of objects where the label property will be used for the content of the HTML <option>, and the value from the valueKey prop will be used for the <option value="">. You can also provide the labelKey prop if you want to use a different key for the label value.

Preset customization

The VSelect preset configuration interface extends the DefaultConfig interface, which is explained in detail here.

export interface SelectConfig extends DefaultConfig {
carret?: {
icon?: string,
class: MethodOrStringType,
sizes?: MethodOrObject,
size?: MethodOrStringType,
fill?: string,
stroke?: string,

Here the exemple from the default Select.config.ts vunix preset which is built on top of Tailwind CSS.

const config = {
class: 'focus:outline-none font-medium',
variants: {
default: ({ props }) => {
const focused = props.error ? 'border-red-400 focus:border-red-400 focus:ring-red-400' : 'border-gray-200 focus:border-blue-300 focus:ring-blue-300'
return `bg-gray-100 hover:bg-gray-200 focus:ring-2 disabled:text-gray-400 ${focused}`
sizes: {
[SizeEnum.sm]: 'pl-3 py-1.5 text-xs',
[SizeEnum.md]: 'px-3 py-2 text-sm',
[SizeEnum.lg]: 'px-3 py-1 text-xl',
carret: {
class: 'bg-no-repeat appearance-none',
icon: 'heroicons-solid:chevron-down',
fill: 'rgb(156, 163, 175)',
sizes: {
[SizeEnum.sm]: 'bg-[length:20px_20px] bg-[right_4px_center]',
[SizeEnum.md]: 'bg-[length:24px_24px] bg-[right_6px_center]',
[SizeEnum.lg]: 'bg-[length:24px_24px] bg-[right_10px_center]',
} as SelectConfig;

The carret key allows you to customize the caret icon of the native <select> element. The icon key uses the power of the VIcon composable to render an SVG icon from its name. The fill and stroke keys are used to change the default color of the SVG.


Below is a list of props for the VSelect component.

Please refer to the VFormGroup component prop section as VSelect inherits all props from VFormGroup.
Prop nameDescriptionTypeRequired
optionsAn array of options for the select, can be an array of strings, numbers, or objects with a value and label propertyArrayYes
valueKeyThe key name used to extract the value from an object in the options arrayStringNo
labelKeyThe key name used to extract the label from an object in the options arrayStringNo
disabledDisable the selectBooleanNo
requiredMark the select as requiredBooleanNo
placeholderThe placeholder text of the selectStringNo