ComboboxReady

Combobox is an autocomplete input that allows users to filter a list of options and select one or more values.

Open in new window

View RTL

<script lang="ts" setup>
const value = ref<string | undefined>(undefined)
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxSingle v-model="value" label="Species" :options />
</template>

<script lang="ts" setup>
import type { Option } from '~/components/BaseCombobox.vue'

const value = ref<Option[]>([
  { value: 'Java', label: 'Java' },
  { value: 'JavaScript', label: 'JavaScript' },
])

const asyncOptions = async (query: string) => {
  return await fetchLanguages(query)
}

type DataResponseItem = {
  objectId: string
  ProgrammingLanguage: string
  createdAt: string
  updatedAt: string
}

const fetchLanguages = async (query: string) => {
  // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset

  let where = ''

  if (query) {
    where =
      '&where=' +
      encodeURIComponent(
        JSON.stringify({
          ProgrammingLanguage: {
            $regex: `${query}|${query.toUpperCase()}|${
              query[0].toUpperCase() + query.slice(1)
            }`,
          },
        }),
      )
  }

  const response = await fetch(
    'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +
      where,
    {
      headers: {
        'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id
        'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key
      },
    },
  )

  const data = await response.json() // Here you have the data that you need

  return data.results.map((item: DataResponseItem) => ({
    value: item.ProgrammingLanguage,
    label: item.ProgrammingLanguage,
  }))
}
</script>

<template>
  <provet-stack>
    <ComboboxMultipleAsync
      v-model="value"
      label="Programming language"
      :min-chars="0"
      :resolve-on-load="false"
      resolve-on-open
      :delay="0"
      :max-displayed-options="10"
      :options="asyncOptions"
      value-as-object
      infinite-scroll
      expand
    />
  </provet-stack>
</template>

<script lang="ts" setup>
import type { Option } from '~/components/BaseCombobox.vue'

const value = ref<Option | undefined>({
  value: 'Java',
  label: 'Java',
})

const asyncOptions = async (query: string) => {
  return await fetchLanguages(query)
}

type DataResponseItem = {
  objectId: string
  ProgrammingLanguage: string
  createdAt: string
  updatedAt: string
}

const fetchLanguages = async (query: string) => {
  // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset

  let where = ''

  if (query) {
    where =
      '&where=' +
      encodeURIComponent(
        JSON.stringify({
          ProgrammingLanguage: {
            $regex: `${query}|${query.toUpperCase()}|${
              query[0].toUpperCase() + query.slice(1)
            }`,
          },
        }),
      )
  }

  const response = await fetch(
    'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +
      where,
    {
      headers: {
        'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id
        'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key
      },
    },
  )

  const data = await response.json() // Here you have the data that you need

  return data.results.map((item: DataResponseItem) => ({
    value: item.ProgrammingLanguage,
    label: item.ProgrammingLanguage,
  }))
}
</script>

<template>
  <ComboboxSingleAsync
    v-model="value"
    label="Programming language"
    :min-chars="1"
    :resolve-on-load="false"
    resolve-on-open
    :delay="0"
    :max-displayed-options="10"
    :options="asyncOptions"
    value-as-object
    infinite-scroll
  />
</template>

<script lang="ts" setup>
const value = ref<string[]>(['FELINE'])
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxMultiple v-model="value" label="Species" :options disabled />
</template>

<script lang="ts" setup>
const value = ref<string[]>(['FELINE'])
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxMultiple v-model="value" label="Species" :options expand />
</template>

<script lang="ts" setup>
const value = ref<string[]>(['FELINE'])
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxMultiple v-model="value" label="Species" :options />
</template>

<script lang="ts" setup>
const value = ref<string[]>(['FELINE'])
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxMultiple v-model="value" label="Species" :options open-on-focus />
</template>

<script lang="ts" setup>
const value = ref<string | undefined>(undefined)
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxSingle v-model="value" label="Species" :options required />
</template>

<script lang="ts" setup>
const value = ref<string | undefined>(undefined)
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxSingle
    v-model="value"
    label="Species"
    :options
    hint="Hint is an accessible way to provide additional information that might help the user"
  />
</template>

<script lang="ts" setup>
const value = ref<string[]>([])
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxMultiple
    v-model="value"
    label="Species"
    :options
    placeholder="Please select"
  />
</template>

<script lang="ts" setup>
const value = ref<string[]>(['FELINE'])
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxMultiple v-model="value" label="Species" :options create-option />
</template>

<script lang="ts" setup>
const value = ref<string | undefined>(undefined)
const options = ref([
  { label: 'Amphibian', value: 'AMPHIBIAN' },
  { label: 'Canine', value: 'CANINE' },
  { label: 'Feline', value: 'FELINE' },
  { label: 'Rodents', value: 'RODENTS' },
])
</script>

<template>
  <ComboboxSingle
    v-model="value"
    label="Species"
    :options
    :error="value ? undefined : 'Select an option'"
  />
</template>

Usage

This section includes guidelines for designers and developers about the usage of this pattern in different contexts.

Do

Use when you want to help users select an item from a large list of options.
Combobox is useful for presenting options when the screen real estate is limited.
Label combobox clearly so that the user knows what kind of options will be available.
Order options in an intentional way so it’s easier for the user to find a specific value.

Don’t

Don't use a combobox if you have less than 6 options to choose from. Consider using select, segmented control or radio components instead.

Content guidelines

Combobox options should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Service dog

Service Dog

Avoid unnecessary words and articles in combobox options, such as “the”, “an” or “a”:

Service dog

A service dog

Avoid ending combobox options in punctuation:

Veterinary clinic

Veterinary clinic.

Avoid all caps for combobox options:

Veterinary clinic

VETERINARY CLINIC

Keep combobox options short:

Service dog

This user has selected service dog.

Integration

This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).

Troubleshooting

If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.

Edit page

ComboboxReady

Usage #

Do #

Don’t #

Content guidelines #

Integration

Troubleshooting

Was this page helpful?

Usage

Do

Don’t

Content guidelines