Alixan UI

Autocomplete

A searchable select input with a teleported list and safe outside click catcher.

Installation

npx alixan-ui-nuxt add autocomplete

Usage

<script setup lang="ts">
const city = ref(null)
const options = [
  { label: 'Almaty', value: 'almaty' },
  { label: 'Astana', value: 'astana' },
]
</script>

<template>
  <Autocomplete v-model="city" label="City" :options="options" />
</template>

Validation

<script setup lang="ts">
const city = ref(null)
const error = computed(() => !city.value ? 'City is required' : '')
</script>

<template>
  <Autocomplete
    v-model="city"
    label="City"
    :options="options"
    :error="error"
  />
</template>