Select

Vue Bootstrap 5 Select

Vue Select fields components are used for collecting user provided information from a list of options.

Note: Read the API tab to find all available options and advanced customization

Basic example

Select options are added using v-model with the options argument. You can get selected values in two ways. The first is to filter the data given in v-model:options by a selected key. The second method is to use v-model:selected which is read-only and stores the currently selected options as a string (single select) or as an array (multiple select).

Basic select behaves like a native one and by default marks the first available option as selected. To change this setting, easily set the preselect property to false.

One
<template>
  <MDBSelect v-model:options="options1" v-model:selected="selected1" />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options1 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 }
      ]);
      const selected1 = ref("");

      return {
        options1,
        selected1
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options1 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 }
  ]);
  const selected1 = ref([]);
</script>

Multiselect

Add multiple property to the select component to activate multiple mode.

<template>
  <MDBSelect
    v-model:options="options2"
    v-model:selected="selected2"
    multiple
    label="Example label"
  />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options2 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 }
      ]);
      const selected2 = ref([]);

      return {
        options2,
        selected2
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options2 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 }
  ]);
  const selected2 = ref([]);
</script>

Select with label

It is possible to add select label by setting the label property.

One
<template>
  <MDBSelect v-model:options="options3" label="Example label" />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options3 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);

      return {
        options3
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options3 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
</script>

Select with placeholder

Use placeholder property to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected. 

<template>
  <MDBSelect
    v-model:options="options4"
    multiple
    placeholder="Example placeholder"
  />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options4 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);

      return {
        options4
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options4 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
</script>

Disabled select

Add disabled attribute to the select component to disable select input.

One
<template>
  <MDBSelect
    v-model:options="options5"
    disabled
  />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options5 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);

      return {
        options5
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options5 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
</script>

Disabled options

Use disabled key on option element to disable specific option.

One
<template>
  <MDBSelect v-model:options="options6" />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options6 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2, disabled: true },
        { text: "Three", value: 3, disabled: true },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);

      return {
        options6
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  interface Option6 {
    text: string | number;
    value?: string | number;
    disabled?: boolean;
  }

  const options6 = ref<Option6[]>([
    { text: "One", value: 1 },
    { text: "Two", value: 2, disabled: true },
    { text: "Three", value: 3, disabled: true },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
</script>

Clear button

Set clearButton property to display the button that will allow to clear current selections.

✕
One
<template>
  <MDBSelect
    v-model:options="options7"
    clearButton
  />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options7 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);

      return {
        options7
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options7 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
</script>

Custom content

Custom content will be displayed at the end of the select dropdown.

One
<template>
  <MDBSelect v-model:options="options9">
    <MDBBtn color="primary" size="sm">Save</MDBBtn>
  </MDBSelect>
</template>
<script>
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn
    },
    setup() {
      const options9 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);

      return {
        options9
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options9 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
</script>

Visible options

Use visibleOptions property to change the number of options that will be displayed in the select dropdown without scrolling.

One
<template>
  <MDBSelect v-model:options="options10" :visibleOptions="3" />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options10 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);

      return {
        options10
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options10 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
</script>

Secondary text

Add secondary-text key to the specific options to display secondary text.

One
<template>
  <MDBSelect v-model:options="options11" :optionHeight="44" />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options11 = ref([
        { text: "One", secondaryText: "Secondary text", value: 1 },
        { text: "Two", secondaryText: "Secondary text", value: 2 },
        { text: "Three", secondaryText: "Secondary text", value: 3 },
        { text: "Four", secondaryText: "Secondary text", value: 4 },
        { text: "Five", secondaryText: "Secondary text", value: 5 }
      ]);

      return {
        options11
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options11 = ref([
    { text: "One", secondaryText: "Secondary text", value: 1 },
    { text: "Two", secondaryText: "Secondary text", value: 2 },
    { text: "Three", secondaryText: "Secondary text", value: 3 },
    { text: "Four", secondaryText: "Secondary text", value: 4 },
    { text: "Five", secondaryText: "Secondary text", value: 5 }
  ]);
</script>

Select with search inside a modal

<template>
  <MDBBtn color="primary" aria-controls="exampleModal" @click="modal1 = true">Launch demo modal</MDBBtn>
  <MDBModal id="modal" tabindex="-1" labelledby="modalLabel" v-model="modal1">
    <MDBModalHeader>
      <MDBModalTitle id="modalLabel"> Modal title </MDBModalTitle>
    </MDBModalHeader>
    <MDBModalBody>
      <MDBSelect v-model:options="options13" filter />
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" @click="modal1 = false">Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</template>
<script>
  import {
    MDBSelect,
    MDBBtn,
    MDBModal,
    MDBModalHeader,
    MDBModalTitle,
    MDBModalBody,
    MDBModalFooter
  } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn,
      MDBModal,
      MDBModalHeader,
      MDBModalTitle,
      MDBModalBody,
      MDBModalFooter
    },
    setup() {
      const options13 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 },
        { text: "Nine", value: 9 },
        { text: "Ten", value: 10 }
      ]);
      const modal1 = ref(false);

      return {
        options13,
        modal1
      };
    }
  };
</script>
<script setup lang="ts">
  import {
    MDBSelect,
    MDBBtn,
    MDBModal,
    MDBModalHeader,
    MDBModalTitle,
    MDBModalBody,
    MDBModalFooter
  } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options13 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 },
    { text: "Nine", value: 9 },
    { text: "Ten", value: 10 }
  ]);
  const modal1 = ref(false);
</script>

Option groups

It is possible to group options by using optgroup key.

One
<template>
  <MDBSelect v-model:options="options14" />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options14 = ref([
        { text: "Label 1", optgroup: true, disabled: true },
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Label 2", optgroup: true, disabled: true },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 }
      ]);

      return {
        options14
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  interface Option14 {
    text: string | number;
    value?: string | number;
    disabled?: boolean;
    optgroup?: boolean;
  }

  const options14 = ref<Option14[]>([
    { text: "Label 1", optgroup: true, disabled: true },
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Label 2", optgroup: true, disabled: true },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 }
  ]);
</script>

Select with icons

Add icon property to the specific options to display the option icon.

One
One
<template>
  <MDBSelect v-model:options="options15" />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options15 = ref([
        {
          text: "One",
          value: 1,
          icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp"
        },
        {
          text: "Two",
          value: 2,
          icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp"
        },
        {
          text: "Three",
          value: 3,
          icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp"
        },
        {
          text: "Four",
          value: 4,
          icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp"
        },
        {
          text: "Five",
          value: 5,
          icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp"
        }
      ]);

      return {
        options15
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options15 = ref([
    {
      text: "One",
      value: 1,
      icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp"
    },
    {
      text: "Two",
      value: 2,
      icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp"
    },
    {
      text: "Three",
      value: 3,
      icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp"
    },
    {
      text: "Four",
      value: 4,
      icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp"
    },
    {
      text: "Five",
      value: 5,
      icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp"
    }
  ]);
</script>

Validation

Set isValidated and isValid properties to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages. Validate method can be set on select's change event.

This value is valid
This value is invalid
✕
<template>
  <MDBSelect
    v-model:options="options8"
    v-model:selected="selected8"
    clearButton
    :isValidated="isValidated"
    :isValid="isValid"
    required
    validFeedback="This value is valid"
    invalidFeedback="This value is invalid"
    @change="validate"
  />
  <MDBBtn
    @click="
      validate();
      isValidated = true;
    "
    color="primary"
    size="sm"
    class="mt-3"
  >
    Submit
  </MDBBtn>
</template>
<script>
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn
    },
    setup() {
      const options8 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);
      const selected8 = ref("");
      const isValidated = ref(false);
      const isValid = ref(false);
      const validate = () => {
        if (selected8.value === "" || !selected8.value) {
          isValid.value = false;
        } else {
          isValid.value = true;
        }
      };

      return {
        options8,
        selected8,
        isValid,
        isValidated,
        validate
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options8 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 }
  ]);
  const selected8 = ref("");
  const isValidated = ref(false);
  const isValid = ref(false);
  const validate = () => {
    if (selected8.value === "" || !selected8.value) {
      isValid.value = false;
    } else {
      isValid.value = true;
    }
  };
</script>

You can create custom rules and show the validation results via isValidated and isValid properties. 

<template>
  <MDBRow
    tag="form"
    class="g-3 needs-validation"
    novalidate
    @submit.prevent="checkFormPro"
  >
    <MDBCol col="12">
      <MDBSelect
        v-model:options="optionsValidation1"
        v-model:selected="selectedValidation1"
        :isValidated="isSelectValidated"
        :isValid="isSelectValid"
        clearButton
        validFeedback="This value is valid"
        invalidFeedback="This value is invalid"
        @change="validateSelect"
      />
    </MDBCol>
    <MDBCol col="12">
      <MDBBtn color="primary" type="submit">Submit form</MDBBtn>
    </MDBCol>
  </MDBRow>
</template>
<script>
  import { MDBSelect, MDBBtn, MDBRow, MDBCol } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn
    },
    setup() {
      const optionsValidation1 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 },
      ]);
      const selectedValidation1 = ref();

      const isSelectValidated = ref(false);
      const isSelectValid = ref(false);

      const validateSelect = () => {
        if (!isSelectValidated.value) {
          return;
        }

        isSelectValid.value =
          optionsValidation1.value.filter(
            (v) => v.value === selectedValidation1.value
          ).length !== 0;
      };

      const checkFormPro = (e) => {
        e.target.classList.add("was-validated");
        isSelectValidated.value = true;
        validateSelect();
      };

      return {
        optionsValidation1,
        selectedValidation1,
        isSelectValidated,
        isSelectValid,
        validateSelect,
        checkFormPro
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect, MDBBtn, MDBRow, MDBCol } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const optionsValidation1 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 },
  ]);
  const selectedValidation1 = ref();

  const isSelectValidated = ref(false);
  const isSelectValid = ref(false);

  const validateSelect = () => {
    if (!isSelectValidated.value) {
      return;
    }

    isSelectValid.value =
      optionsValidation1.value.filter(
        (v) => v.value === selectedValidation1.value
      ).length !== 0;
  };

  const checkFormPro = (e) => {
    e.target.classList.add("was-validated");
    isSelectValidated.value = true;
    validateSelect();
  };

</script>

Set value

The setValue method allows to programatically set the component selections.

Single selection

Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.

Four
<template>
  <MDBSelect
    v-model:options="options16"
    v-model:selected="selected16"
    ref="select16"
  />
  <MDBBtn
    class="mt-2"
    color="primary"
    size="sm"
    @click="select16?.setValue(4)"
  >
    Select four
  </MDBBtn>
</template>
<script>
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn
    },
    setup() {
      const options16 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 }
      ]);
      const selected16 = ref("");

      const select16 = ref(null);

      return {
        options16,
        selected16,
        select16
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options16 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 }
  ]);
  const selected16 = ref("");

  const select16 = ref<InstanceType<typeof MDBSelect> | null>(null);
</script>

Multi selection

Add array of string values to the arguments list to correctly select options with corresponding values in multi selection mode. 

<template>
  <MDBSelect v-model:options="options17" v-model:selected="selected17" multiple ref="select17" />
  <MDBBtn class="mt-2" color="primary" size="sm" @click="select17?.setValue([3, 4, 5])">
    Select three, four, five
  </MDBBtn>
</template>
<script>
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn
    },
    setup() {
      const options17 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 }
      ]);
      const selected17 = ref("");

      const select17 = ref(null);

      return {
        options17,
        selected17,
        select17
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options17 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 },

  ]);
  const selected17 = ref("");

  const select17 = ref<InstanceType<typeof MDBSelect> | null>(null);
</script>

Select with toggle element

If you want to toggle Select via button, you have to add toggle / open / close function from MDBSelect ref and pin her to this button.

One
<template>
  <MDBBtn
    color="primary"
    class="mb-3"
    @click.stop="toggleElement?.open()"
    @touchstart.stop
    >Toggle Select</MDBBtn
  >
  <MDBSelect
    ref="toggleElement"
    v-model:options="options8"
    v-model:selected="selected8"
  />
</template>
<script>
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn
    },
    setup() {
      const options8 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);
      const selected8 = ref("");

      const toggleElement = ref(null);

      return {
        options8,
        selected8,
        toggleElement,
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options8 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 }
      ]);
  const selected8 = ref("");
  const toggleElement = ref<InstanceType<typeof MDBSelect> | null>(null);
</script>

Auto select

Set autoSelect option to true to enable selecting on Tab press.

One
<template>
  <MDBSelect v-model:options="options18" v-model:selected="selected18" autoSelect />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options18 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 }
      ]);
      const selected18 = ref("");

      return {
        options18,
        selected18
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options18 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 }
  ]);
  const selected18 = ref("");
</script>

Hidden selected option

Add the first option with the hidden and selected attributes and an empty value to leave select with no selection.

<template>
  <MDBSelect
    v-model:options="options19"
    v-model:selected="selected19"
    label="Example label"
  />
</template>
<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect
    },
    setup() {
      const options19 = ref([
        { text: "", value: "", selected: true, hidden: true },
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 },
      ]);
      const selected19 = ref("");

      return {
        options19,
        selected19
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options19 = ref([
        { text: "", value: "", selected: true, hidden: true },
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 },
      ]);
      const selected19 = ref("");
</script>

Select - API

Import

<script>
  import { MDBSelect } from "mdb-vue-ui-kit";
</script>

Properties

Property Type Default Description
autocomplete String - Provides the autocomplete attribute to the input element.
autoSelect Boolean false Enables auto selecting on Tab press
clearButton Boolean false Adds clear button to the select input.
disabled Boolean false Changes select input state to disabled.
displayedLabels Number 5 The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off.
excludeOptGroupsInFilter Boolean false Allows to exclude option groups labels from the filter. If set to true, the filter will search only in the options and not show the option groups labels.
filter Boolean false Displays filter input that allow to search for specific option.
filterDebounce Number 300 Adds delay to the options list updates when using filter input. Improves performance of the select with filter.
filterFn Function - Allows to customize the filter function. The Function should take two arguments: data and searchValue. The data argument is an array of options. The searchValue argument is a string value of the filter input. The function should return an array of filtered options.
invalidFeedback String The text which is displayed below the select when the isValidated property is true and isValid prop is false.
isValidated Boolean false Marks select as validated.
isValid Boolean false Marks select as valid.
label String Defines select input label.
multiple Boolean false Enables multiple mode.
noResultsText String "No results" The text that will be displayed when no option is found after using select filter.
optionHeight Number 38 Height of the select option. Used to determine dropdown height and number of visible options.
optionsSelectedLabel String "options selected" The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected
placeholder String Defines select input placeholder.
preselect Boolean true Basic select behaves like a native one and by default marks the first available option as selected. To change this setting, easily set this property to false.
required Boolean false Changes select input state to required.
searchPlaceholder String "Search..." Changes placeholder of the select search input.
selectAll Boolean true Displays select all option in multiselect dropdown.
selectAllLabel String "Select all" Changes label of select all option.
size String Changes input size. Available options: sm, lg, default.
tag String "div" Defines select wrapper tag.
tabindex Number 0 Adds passing tabindex value also to input.
validFeedback String The text which is displayed below the select when the isValidated and isValid properties are true.
visibleOptions Number 5 The maximum number of options which are visible in the select dropdown without scrolling.
v-model:options Array Data array required to fill select component.
v-model:selected [String, Array, Number] Readonly and reactive property for getting selected values.
white Boolean false Adjust input colors for dark backgrounds.

Methods

Name Description Example
clear Manually clears a selection $refs.select1.clear();
close Manually closes a select $refs.select1.close();
open Manually opens a select $refs.select1.open();
setValue Programatically set component selections. Add single value for default select and array of values for multiselect. $refs.select1.setValue(3);
setOption Programatically set component selections by an option key. Use -1 key to select all in multiple mode. $refs.select1.setOption(2);
toggle Manually toggles a select $refs.select1.toggle();
toggleSelectAll Toggle select all. $refs.select1.toggleSelectAll(); 
<template>
  <MDBSelect v-model:options="options1" ref="select1" />
  <MDBBtn @click.stop="select1?.setValue(3)" color="primary">
     Select three
  </MDBBtn >
</template>
<script>
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBSelect,
      MDBBtn
    },
    setup() {
      const options1 = ref([
        { text: "One", value: 1 },
        { text: "Two", value: 2 },
        { text: "Three", value: 3 },
        { text: "Four", value: 4 },
        { text: "Five", value: 5 },
        { text: "Six", value: 6 },
        { text: "Seven", value: 7 },
        { text: "Eight", value: 8 }
      ]);

      const select1 = ref(null);

      return {
        options1,
        select1
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const options1 = ref([
    { text: "One", value: 1 },
    { text: "Two", value: 2 },
    { text: "Three", value: 3 },
    { text: "Four", value: 4 },
    { text: "Five", value: 5 },
    { text: "Six", value: 6 },
    { text: "Seven", value: 7 },
    { text: "Eight", value: 8 }
  ]);
  const select1 = ref<InstanceType<typeof MDBSelect> | null>(null);
</script>

Events

Name Description
change This event fires immediately on every select data change.
clear This event fires immediately when the select is cleared.
close This event fires immediately when the select is closed.
closed This event fires when the select is closed and animation finished.
open This event fires immediately when the select is opened.
opened This event fires after the select is opened.
search This event fires on input in search field. Information about the searched term can be accessed through the following property of the emitted event: e.value. 
<template>
  <MDBSelect v-model:options="options1" @clear="handleClear" />
</template>

CSS variables

As part of MDB’s evolving CSS variables approach, select now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Select CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

// .select-wrapper
--#{$prefix}form-outline-select-arrow-color: #{$form-outline-select-arrow-color};
--#{$prefix}form-outline-select-arrow-font-size: #{$form-outline-select-arrow-font-size};
--#{$prefix}form-outline-select-arrow-top: #{$form-outline-select-arrow-top};
--#{$prefix}form-outline-select-arrow-right: #{$form-outline-select-arrow-right};
--#{$prefix}form-outline-select-valid-color: #{$form-outline-select-valid-color};
--#{$prefix}form-outline-select-invalid-color: #{$form-outline-select-invalid-color};
--#{$prefix}form-outline-select-clear-btn-color: #{$form-outline-select-clear-btn-color};
--#{$prefix}form-outline-select-clear-btn-font-size: #{$form-outline-select-clear-btn-font-size};
--#{$prefix}form-outline-select-clear-btn-top: #{$form-outline-select-clear-btn-top};
--#{$prefix}form-outline-select-clear-btn-right: #{$form-outline-select-clear-btn-right};
--#{$prefix}form-outline-select-clear-btn-focus-color: #{$form-outline-select-clear-btn-focus-color};
--#{$prefix}form-outline-select-sm-clear-btn-font-size: #{$form-outline-select-sm-clear-btn-font-size};
--#{$prefix}form-outline-select-sm-clear-btn-top: #{$form-outline-select-sm-clear-btn-top};
--#{$prefix}form-outline-select-lg-clear-btn-top: #{$form-outline-select-lg-clear-btn-top};
--#{$prefix}form-outline-select-label-max-width: #{$form-outline-select-label-max-width};
--#{$prefix}form-outline-select-label-active-transform: #{$form-outline-select-label-active-transform};
--#{$prefix}form-outline-select-lg-label-active-transform: #{$form-outline-select-lg-label-active-transform};
--#{$prefix}form-outline-select-sm-label-active-transform: #{$form-outline-select-sm-label-active-transform};
--#{$prefix}form-outline-select-input-focused-color: #{$form-outline-select-input-focused-color};
--#{$prefix}form-outline-select-label-color: #{$form-outline-select-label-color};
--#{$prefix}form-outline-select-notch-border-color: #{$form-outline-select-notch-border-color};
--#{$prefix}form-outline-select-input-focused-arrow-color: #{$form-outline-select-input-focused-arrow-color};
--#{$prefix}form-outline-select-white-focus-arrow-color: #{$form-outline-select-white-focus-arrow-color};
--#{$prefix}form-outline-select-white-arrow-color: #{$form-outline-select-white-arrow-color};
--#{$prefix}form-outline-select-white-clear-btn: #{$form-outline-select-white-clear-btn};
--#{$prefix}form-outline-select-sm-arrow-top: #{$form-outline-select-sm-arrow-top};
--#{$prefix}form-outline-select-lg-arrow-top: #{$form-outline-select-lg-arrow-top};
--#{$prefix}form-outline-form-notch-border-top: #{$form-outline-form-notch-border-top};

// .select-dropdown-container
--#{$prefix}form-outline-select-dropdown-container-z-index: #{$form-outline-select-dropdown-container-z-index};
--#{$prefix}form-outline-select-dropdown-bg: #{$form-outline-select-dropdown-bg};
--#{$prefix}form-outline-select-dropdown-box-shadow: #{$form-outline-select-dropdown-box-shadow};
--#{$prefix}form-outline-select-dropdown-min-width: #{$form-outline-select-dropdown-min-width};
--#{$prefix}form-outline-select-dropdown-transform: #{$form-outline-select-dropdown-transform};
--#{$prefix}form-outline-select-dropdown-transition: #{$form-outline-select-dropdown-transition};
--#{$prefix}form-outline-select-dropdown-open-transform: #{$form-outline-select-dropdown-open-transform};
--#{$prefix}form-outline-select-dropdown-input-group-padding: #{$form-outline-select-dropdown-input-group-padding};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-width: #{$form-outline-select-options-wrapper-scrollbar-width};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-height: #{$form-outline-select-options-wrapper-scrollbar-height};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-border-bottom-right-radius: #{$form-outline-select-options-wrapper-scrollbar-border-bottom-right-radius};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-border-bottom-left-radius: #{$form-outline-select-options-wrapper-scrollbar-border-bottom-left-radius};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-thumb-height: #{$form-outline-select-options-wrapper-scrollbar-thumb-height};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-thumb-bg: #{$form-outline-select-options-wrapper-scrollbar-thumb-bg};
--#{$prefix}form-outline-select-options-wrapper-scrollbar-thumb-border-radius: #{$form-outline-select-options-wrapper-scrollbar-thumb-border-radius};

// .select-option-group-label
--#{$prefix}form-outline-select-option-group-label-padding-left: #{$form-outline-select-option-group-label-padding-left};
--#{$prefix}form-outline-select-option-group-label-padding-right: #{$form-outline-select-option-group-label-padding-right};
--#{$prefix}form-outline-select-option-group-label-font-size: #{$form-outline-select-option-group-label-font-size};
--#{$prefix}form-outline-select-option-group-label-font-weight: #{$form-outline-select-option-group-label-font-weight};
--#{$prefix}form-outline-select-option-group-label-color: #{$form-outline-select-option-group-label-color};

// .select-option-group > .select-option
--#{$prefix}form-outline-select-option-group-select-option-padding-left: #{$form-outline-select-option-group-select-option-padding-left};

// .select-option
--#{$prefix}form-outline-select-option-color: #{$form-outline-select-option-color};
--#{$prefix}form-outline-select-option-padding-left: #{$form-outline-select-option-padding-left};
--#{$prefix}form-outline-select-option-padding-right: #{$form-outline-select-option-padding-right};
--#{$prefix}form-outline-select-option-font-size: #{$form-outline-select-option-font-size};
--#{$prefix}form-outline-select-option-font-weight: #{$form-outline-select-option-font-weight};
--#{$prefix}form-outline-select-option-hover-not-disabled-bg: #{$form-outline-select-option-hover-not-disabled-bg};
--#{$prefix}form-outline-select-option-active-bg: #{$form-outline-select-option-active-bg};
--#{$prefix}form-outline-select-option-selected-active-bg: #{$form-outline-select-option-selected-active-bg};
--#{$prefix}form-outline-select-option-selected-disabled-color: #{$form-outline-select-option-selected-disabled-color};
--#{$prefix}form-outline-select-option-selected-bg: #{$form-outline-select-option-selected-bg};
--#{$prefix}form-outline-select-option-disabled-color: #{$form-outline-select-option-disabled-color};
--#{$prefix}form-outline-select-option-text-form-check-input-margin-right: #{$form-outline-select-option-text-form-check-input-margin-right};
--#{$prefix}form-outline-select-option-secondary-text-font-size: #{$form-outline-select-option-secondary-text-font-size};
--#{$prefix}form-outline-select-option-secondary-text-color: #{$form-outline-select-option-secondary-text-color};
--#{$prefix}form-outline-select-option-icon-width: #{$form-outline-select-option-icon-width};
--#{$prefix}form-outline-select-option-icon-height: #{$form-outline-select-option-icon-height};
--#{$prefix}form-outline-select-no-results-padding-left: #{$form-outline-select-no-results-padding-left};
--#{$prefix}form-outline-select-no-results-padding-right: #{$form-outline-select-no-results-padding-right};
--#{$prefix}form-outline-select-white-arrow: #{$form-outline-select-white-arrow};

SCSS variables

$form-outline-select-arrow-color: #000;
$form-outline-select-arrow-font-size: 0.8rem;
$form-outline-select-arrow-top: 9px;
$form-outline-select-arrow-right: 9px;

$form-outline-select-valid-color: #00b74a;
$form-outline-select-invalid-color: #f93154;

$form-outline-select-clear-btn-color: #000;
$form-outline-select-clear-btn-font-size: 1rem;
$form-outline-select-clear-btn-top: 7px;
$form-outline-select-clear-btn-right: 27px;
$form-outline-select-clear-btn-focus-color: $primary;

$form-outline-select-sm-clear-btn-font-size: 0.8rem;
$form-outline-select-sm-clear-btn-top: 4px;

$form-outline-select-lg-clear-btn-top: 11px;

$form-outline-select-dropdown-container-z-index: $popconfirm-backdrop-zindex;

$form-outline-select-dropdown-bg: #fff;
$form-outline-select-dropdown-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
  0 2px 10px 0 rgba(0, 0, 0, 0.12);
$form-outline-select-dropdown-min-width: 100px;
$form-outline-select-dropdown-transform: scaleY(0.8);
$form-outline-select-dropdown-transition: all 0.2s;

$form-outline-select-dropdown-open-transform: scaleY(1);

$form-outline-select-dropdown-input-group-padding: 10px;

$form-outline-select-label-max-width: 80%;
$form-outline-select-label-active-transform: translateY(-1rem) translateY(0.1rem) scale(0.8);

$form-outline-select-lg-label-active-transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
$form-outline-select-sm-label-active-transform: translateY(-0.83rem) translateY(0.1rem) scale(0.8);

$form-outline-select-input-focused-color: #616161;

$form-outline-select-label-color: $primary;
$form-outline-form-notch-border-top: 1px solid transparent;

$form-outline-select-notch-border-width: 2px;
$form-outline-select-notch-border-color: $primary;
$form-outline-select-notch-transition: all 0.2s linear;

$form-outline-select-input-focused-arrow-color: $primary;

$form-outline-select-white-focus-arrow-color: #fff;
$form-outline-select-white-arrow-color: #fff;
$form-outline-select-white-clear-btn: #fff;

$form-outline-select-sm-arrow-top: 3px;
$form-outline-select-lg-arrow-top: 13px;

$form-outline-select-options-wrapper-scrollbar-width: 4px;
$form-outline-select-options-wrapper-scrollbar-height: 4px;
$form-outline-select-options-wrapper-scrollbar-border-bottom-right-radius: 4px;
$form-outline-select-options-wrapper-scrollbar-border-bottom-left-radius: 4px;
$form-outline-select-options-wrapper-scrollbar-thumb-height: 50px;
$form-outline-select-options-wrapper-scrollbar-thumb-bg: #999;
$form-outline-select-options-wrapper-scrollbar-thumb-border-radius: 4px;

$form-outline-select-option-group-label-padding-left: 16px;
$form-outline-select-option-group-label-padding-right: 16px;
$form-outline-select-option-group-label-font-size: 1rem;
$form-outline-select-option-group-label-font-weight: 400;
$form-outline-select-option-group-label-color: rgba(0, 0, 0, 0.54);

$form-outline-select-option-group-select-option-padding-left: 26px;

$form-outline-select-option-color: rgba(0, 0, 0, 0.87);
$form-outline-select-option-padding-left: 16px;
$form-outline-select-option-padding-right: 16px;
$form-outline-select-option-font-size: 1rem;
$form-outline-select-option-font-weight: 400;

$form-outline-select-option-hover-not-disabled-bg: rgba(0, 0, 0, 0.048);
$form-outline-select-option-active-bg: rgba(0, 0, 0, 0.048);
$form-outline-select-option-selected-active-bg: rgba(0, 0, 0, 0.048);
$form-outline-select-option-selected-disabled-color: #9e9e9e;
$form-outline-select-option-selected-bg: rgba(0, 0, 0, 0.02);
$form-outline-select-option-disabled-color: #9e9e9e;

$form-outline-select-option-text-form-check-input-margin-right: 10px;

$form-outline-select-option-secondary-text-font-size: 0.8rem;
$form-outline-select-option-secondary-text-color: #6c757d;

$form-outline-select-option-icon-width: 28px;
$form-outline-select-option-icon-height: 28px;

$form-outline-select-custom-content-padding: 16px;

$form-outline-select-no-results-padding-left: 16px;
$form-outline-select-no-results-padding-right: 16px;

$form-outline-select-white-arrow: #fff;