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
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
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>

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


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.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page