VSelect

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" />
/>

Options

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.

Props

Below is a list of props for the VSelect component.