FormSelect Component

The FormSelect component is built with Vue 3 and provides a customizable select input with support for custom icons and slots. It's designed to be flexible and easy to integrate into your forms.

Basic Usage

Import and use FormSelect in your Vue components as follows:

<template>
  <FormSelect v-model="select1">
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </FormSelect>
</template>

<script setup>
import { FormSelect } from '@robuust-digital/vue-components/core';
</script>

Select an optionOption 1Option 2Option 3

Props

The FormSelect component accepts the following props:

Prop	Type	Default	Description
modelValue	String, Number, Object	null	The selected value(s)
icon	Object, Function	null	Specifies an icon to display within the select. @heroicons/vue can be used, or you can import your own .svg files.
prefixIcon	Object, Function	null	Specifies an icon to display on the left side of the select. @heroicons/vue can be used, or you can import your own .svg files.
rootClass	String	''	Additional classes for the root div
options	Array	[]	An array of options to populate the select.
optionValue	String	'id'	The property name to use for the option value.
optionLabel	String	'name'	The property name to use for the option label.

Slots

The FormSelect component provides several slots for customization:

Default Slot

The default slot is used for the select options:

Choose a colorRedBlueGreen

Show code

<template>
  <FormSelect v-model="select2">
    <option value="">Choose a color</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </FormSelect>
</template>

Icon Slot

You can customize the dropdown icon using the icon slot:

Select an optionOption 1Option 2

Show code

<template>
  <FormSelect v-model="select3">
    <option value="">Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <template #icon>
      <BeakerIcon />
    </template>
  </FormSelect>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/16/solid';
</script>

icon-left Slot

You can customize the icon-left using the icon-left slot:

Select an optionOption 1Option 2

Show code

<template>
  <FormSelect v-model="select3">
    <template #icon-left>
      <BeakerIcon />
    </template>
    <option value="">Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </FormSelect>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/16/solid';
</script>

Examples

Use options prop

Option 1Option 2Option 3

Show code

<template>
  <FormSelect v-model="select4" :options="options" option-value="value" option-label="label"></FormSelect>
</template>

<script setup>
const select4 = ref('option2');
const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];
</script>

Pre-selected Value

Option 1Option 2Option 3

Show code

<template>
  <FormSelect v-model="select4">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </FormSelect>
</template>

<script setup>
const select4 = ref('option2');
</script>

Custom Icon

Option 1Option 2Option 3

Show code

<template>
  <FormSelect :icon="BeakerIcon">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option selected value="option3">Option 3</option>
  </FormSelect>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/16/solid';
</script>

Pre Icon

Option 1Option 2Option 3

Show code

<template>
  <FormSelect :icon-left="BeakerIcon">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option selected value="option3">Option 3</option>
  </FormSelect>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/16/solid';
</script>

Refs

The FormSelect component's native HTML <select> element can be accessed using a template ref combined with a ref. This allows you to call native select methods or set properties directly:

<template>
  <FormSelect ref="selectRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const selectRef = ref();

onMounted(() => {
  // Access the native select element
  const nativeSelect = selectRef.value.$refs.select.$el;
  
  // Use native select properties and methods
  nativeSelect.focus(); // Focus the select
});
</script>

CSS Customization ⚡️

To customize the select styles global

:root {
  /* Available variables */
  --rvc-select-border-radius: var(--rvc-base-border-radius);
  --rvc-select-border-width: var(--rvc-base-border-width);
  --rvc-select-border-color: var(--rvc-base-border-color);
  --rvc-select-font-size: var(--rvc-base-input-font-size);
  --rvc-select-font-weight: var(--rvc-base-input-font-weight);
  --rvc-select-box-shadow: var(--rvc-base-box-shadow);
  --rvc-select-color: var(--rvc-base-input-color);
  --rvc-select-bg-color: var(--rvc-base-input-bg-color);
  --rvc-select-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
  --rvc-select-disabled-opacity: var(--rvc-base-input-disabled-opacity);
  --rvc-select-icon-size: var(--rvc-base-input-icon-size);
  --rvc-select-icon-color: var(--rvc-base-input-icon-color);
  --rvc-select-padding-x: var(--rvc-base-input-padding-x);
  --rvc-select-height: var(--rvc-base-input-height);
  --rvc-select-placeholder-color: var(--rvc-base-input-placeholder-color);

  /* Small variant */
  --rvc-select-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
  --rvc-select-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
  --rvc-select-icon-size-sm: calc(var(--rvc-base-input-icon-size) * 0.85);
  --rvc-select-height-sm: 1.875rem;
}