InputMenu

Display an autocomplete input with real-time suggestions.

Usage

The InputMenu component renders by default an Input component and is based on the ui.input preset. You can use most of the Input props to configure the display such as color, variant, size, placeholder, icon, disabled, etc.

You can use the ui prop like the Input component to override the default config. The uiMenu prop can be used to override the default menu config.

Pass an array of strings or objects to the options prop to display in the menu.

<script setup>
import {ref} from "vue";

const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']

const selected = ref(people[0])
</script>

<template>
  <SInputMenu v-model="selected" :options="people" />
</template>

Objects

You can pass an array of objects to options and either compare on the whole object or use the by prop to compare on a specific key. You can configure which field will be used to display the label through the option-attribute prop that defaults to label.

<script setup lang="ts">
import {ref} from 'vue'

const people = [{
  id: 'benjamincanac',
  label: 'benjamincanac',
  href: 'https://github.com/benjamincanac',
  target: '_blank',
  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
}, {
  id: 'Atinux',
  label: 'Atinux',
  href: 'https://github.com/Atinux',
  target: '_blank',
  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
}, {
  id: 'smarroufin',
  label: 'smarroufin',
  href: 'https://github.com/smarroufin',
  target: '_blank',
  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
}, {
  id: 'nobody',
  label: 'Nobody',
  icon: 'icon-[heroicons--user-circle]'
}]

const selected = ref(people[0])
</script>

<template>
  <SInputMenu v-model="selected" :options="people">
    <template #leading>
      <SIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
      <SAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" class="mx-0.5" />
    </template>
  </SInputMenu>
</template>