Salfati Group UI Library

Assigned to

<k-combobox
  label="Assigned to"
  :options="people"
  v-model="selectedValue"
/>

Assigned to (disabled)

<k-combobox
  label="Assigned to (disabled)"
  :options="people"
  v-model="selectedValue"
  disabled
/>

Assigned to (multiple) up right

This is an error message

<k-combobox
  label="Assigned to (multiple)"
  :options="people"
  v-model="selectedValues"
  multiple
  direction="up-right"
  errorText="This is an error message"
/>

<script setup lang="ts">
  import { ref } from 'vue'
  const people: OptionType[] = [
    { value: null, label: 'Unassign', icon: IUserCircle },
    { value: 1, label: 'Wade Cooper', online: true },
    {
      value: 2,
      label: 'Arlene Mccoy',
      avatar:
        'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
    { value: 3, label: 'Devon Webb', description: '@devonwebb' },
    { value: 4, label: 'Tom Cook' },
    { value: 5, label: 'Tanya Fox' },
    { value: 6, label: 'Hellen Schmvaluet' },
    { value: 7, label: 'Caroline Schultz' },
    { value: 8, label: 'Mason Heaney' },
    { value: 9, label: 'Claudie Smitham' },
    { value: 10, label: 'Emil Schaefer' },
  ]
  const selectedValue = ref(people[1])
  const selectedValues = ref([people[1]])
</script>