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
<scriptlang="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><ComboboxSinglev-model="value"label="Species":options/></template>
<scriptlang="ts"setup>import type { Option }from'~/components/BaseCombobox.vue'const value = ref<Option[]>([{value:'Java',label:'Java'},{value:'JavaScript',label:'JavaScript'},])constasyncOptions=async(query: string)=>{returnawaitfetchLanguages(query)}type DataResponseItem ={objectId: stringProgrammingLanguage: stringcreatedAt: stringupdatedAt: string}constfetchLanguages=async(query: string)=>{// From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=datasetlet where =''if(query){ where ='&where='+encodeURIComponent(JSON.stringify({ProgrammingLanguage:{$regex:`${query}|${query.toUpperCase()}|${ query[0].toUpperCase()+ query.slice(1)}`,},}),)}const response =awaitfetch('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 needreturn data.results.map((item: DataResponseItem)=>({value: item.ProgrammingLanguage,label: item.ProgrammingLanguage,}))}</script><template><provet-stack><ComboboxMultipleAsyncv-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-objectinfinite-scrollexpand/></provet-stack></template>
<scriptlang="ts"setup>import type { Option }from'~/components/BaseCombobox.vue'const value = ref<Option |undefined>({value:'Java',label:'Java',})constasyncOptions=async(query: string)=>{returnawaitfetchLanguages(query)}type DataResponseItem ={objectId: stringProgrammingLanguage: stringcreatedAt: stringupdatedAt: string}constfetchLanguages=async(query: string)=>{// From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=datasetlet where =''if(query){ where ='&where='+encodeURIComponent(JSON.stringify({ProgrammingLanguage:{$regex:`${query}|${query.toUpperCase()}|${ query[0].toUpperCase()+ query.slice(1)}`,},}),)}const response =awaitfetch('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 needreturn data.results.map((item: DataResponseItem)=>({value: item.ProgrammingLanguage,label: item.ProgrammingLanguage,}))}</script><template><ComboboxSingleAsyncv-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-objectinfinite-scroll/></template>
<scriptlang="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><ComboboxMultiplev-model="value"label="Species":optionsdisabled/></template>
<scriptlang="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><ComboboxMultiplev-model="value"label="Species":optionsexpand/></template>
<scriptlang="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><ComboboxMultiplev-model="value"label="Species":options/></template>
<scriptlang="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><ComboboxMultiplev-model="value"label="Species":optionsopen-on-focus/></template>
<scriptlang="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><ComboboxSinglev-model="value"label="Species":optionsrequired/></template>
<scriptlang="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><ComboboxSinglev-model="value"label="Species":optionshint="Hint is an accessible way to provide additional information that might help the user"/></template>
<scriptlang="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><ComboboxMultiplev-model="value"label="Species":optionsplaceholder="Please select"/></template>
<scriptlang="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><ComboboxMultiplev-model="value"label="Species":optionscreate-option/></template>
<scriptlang="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><ComboboxSinglev-model="value"label="Species":options:error="value ? undefined : 'Select an option'"/></template>
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.