Skip to content

Dropdown

A dropdown list of suggested values with search capability.

Usage

vue
<script setup lang="ts">
import { ref } from 'vue';
import { Dropdown } from '@youcan/ui-vue3';
const category = ref(null);

const items = [
  { label: 'Shoes', value: 1 },
  { label: 'Cosmetics', value: 2 },
  { label: 'Gym', value: 3 },
];
</script>

<template>
  <Dropdown
    v-model="category"
    searchable
    :items="items"
    placeholder="Select category"
  />
</template>

API Reference

Prefix Dropdown

Accessory

Multi select

Usage

vue
<script setup lang="ts">
import { ref } from 'vue';
import { MultiselectDropdown } from '@youcan/ui-vue3';
const desiredLanguages = ref([]);

const languages = [
  { label: 'Arabic', value: 1 },
  { label: 'English', value: 2 },
  { label: 'German', value: 3 },
];
</script>

<template>
  <MultiselectDropdown
    v-model="desiredLanguages"
    :items="languages"
    label="Desired languages"
    icon="i-youcan-translate"
  />
</template>

API Reference