BaseSelect

The BaseSelect component produces an unbranded html <select> element. It provides the foundation for AisSelect and can be used to build other select experiences as well.

Option specification

BaseSelect provides the same option specification interface as AisSelect. Options can be specified via data passed through the options prop or declared explicitly using markup in the body of the tag. Consult AisSelect for details.

Option #1Option #2Option #3

Disabled

v-model: 1

@change:

<script setup>
  import { ref } from 'vue';
  import BaseSelect from '@/components/select/BaseSelect.vue'
  import BaseCheckbox from "@/components/checkbox/BaseCheckbox.vue";

  const options = [
    { value: 1, label: 'Option #1', disabled: false},
    { value: 2, label: 'Option #2', disabled: false},
    { value: 3, label: 'Option #3', disabled: false},
  ]

  const selectedOption = ref(1)
  let selectedObject = ref(undefined)
  let disabled = ref(false)

  const initializeSelection = function (value) {
    console.log('BaseSelect loaded', value)
    selectedObject.value = value
  }

  const handleChange = function (value) {
    console.log('BaseSelect changed', value)
    selectedObject.value = value
  }
</script>

<template>
  <div class="grid gap-4">
    <div class="p-3 border border-info text-info
      focus-within:ring-2 focus-within:ring-info
      focus-within:rounded focus-within:ring-opacity-50"
    >
      <BaseSelect
          class="w-full focus:outline-none"
          :options="options"
          v-model="selectedOption"
          :disabled="disabled"
          @load="initializeSelection"
          @change="handleChange"
      />
    </div>

    <div class="flex gap-8">
      <label>
        <BaseCheckbox v-model="disabled" /> Disabled
      </label>
    </div>

    <div class="grid gap-2 p-4 bg-ui-gray-50 border rounded">
      <div>v-model: {{ selectedOption }}</div>
      <div>@change: {{ selectedObject }}</div>
    </div>
  </div>
</template>

Select Props

v-model

As illustrated in the example above, use the v-model directive to capture the value of the selected option. The selection is the simple value set on the option's value attribute. It is not the object passed through options. You may get the selected object using the @change event.

Events

@update:modelValue

AisSelect uses Vue 3's standard v-model configuration. As a result, you can bind the @update:modelValue to do additional work when the selection changes. It will be fired every time v-model changes.

@load

The @load event fires when the select is loaded. The event's payload contains the selected value from the options array. If options is an array of objects, the payload will be the selected object and not the primitive value emitted by v-model.

@load may be used to capture the selected object or to trigger additional initialization logic.

@change

The @change event fires when the user selects a new value. The event's payload contains the selected value from the options array. If options is an array of objects, the payload will be the selected object and not the primitive value emitted by v-model. This is what makes @change different from @update:modelValue.

@change may be used to capture the selected object or to trigger additional work. When capturing the selected object, use @load to initialize the selection.