Combobox
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
import { Icon } from '@iconify/vue'
const v = ref('')
const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
</script>
<template>
<ComboboxRoot v-model="v" class="relative">
<ComboboxAnchor class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
<ComboboxInput class="!bg-transparent outline-none text-grass11 h-full selection:bg-grass5 placeholder-mauve8" placeholder="Placeholder..." />
<ComboboxTrigger>
<Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
</ComboboxTrigger>
</ComboboxAnchor>
<ComboboxContent class="absolute z-10 w-full mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
<ComboboxViewport class="p-[5px]">
<ComboboxEmpty class="text-mauve8 text-xs font-medium text-center py-2" />
<ComboboxGroup>
<ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
Fruits
</ComboboxLabel>
<ComboboxItem
v-for="(option, index) in options" :key="index"
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
:value="option"
>
<ComboboxItemIndicator
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
>
<Icon icon="radix-icons:check" />
</ComboboxItemIndicator>
<span>
{{ option }}
</span>
</ComboboxItem>
<ComboboxSeparator class="h-[1px] bg-grass6 m-[5px]" />
</ComboboxGroup>
<ComboboxGroup>
<ComboboxLabel
class="px-[25px] text-xs leading-[25px] text-mauve11"
>
Vegetables
</ComboboxLabel>
<ComboboxItem
v-for="(option, index) in vegetables" :key="index"
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
:value="option"
>
<ComboboxItemIndicator
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
>
<Icon icon="radix-icons:check" />
</ComboboxItemIndicator>
<span>
{{ option }}
</span>
</ComboboxItem>
</ComboboxGroup>
</ComboboxViewport>
</ComboboxContent>
</ComboboxRoot>
</template>
Features
- Can be controlled or uncontrolled.
- Offers 2 positioning modes.
- Supports items, labels, groups of items.
- Focus is fully managed.
- Full keyboard navigation.
- Supports custom placeholder.
- Supports Right to Left direction.
Installation
Install the component from your command line.
npm install radix-vue
Anatomy
Import all parts and piece them together.
<script setup lang="ts">
import {
ComboboxAnchor,
ComboboxArrow,
ComboboxCancel,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxItemIndicator,
ComboboxLabel,
ComboboxPortal,
ComboboxRoot,
ComboboxSeparator,
ComboboxTrigger,
ComboboxViewport,
} from 'radix-vue'
</script>
<template>
<ComboboxRoot>
<ComboboxAnchor>
<ComboboxInput />
<ComboboxTrigger />
<ComboboxCancel />
</ComboboxAnchor>
<ComboboxPortal>
<ComboboxContent>
<ComboboxViewport>
<ComboboxEmpty />
<ComboboxItem>
<ComboboxItemIndicator />
</ComboboxItem>
<ComboboxGroup>
<ComboboxLabel />
<ComboboxItem>
<ComboboxItemIndicator />
</ComboboxItem>
</ComboboxGroup>
<ComboboxSeparator />
</ComboboxViewport>
<ComboboxArrow />
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
API Reference
Root
Contains all the parts of a Combobox
Prop | Default | Type |
---|---|---|
defaultValue | T The value of the combobox when initially rendered. Use when you do not need to control the state of the Combobox | |
modelValue | T The controlled value of the Combobox Should be binded-with with | |
defaultOpen | boolean The open state of the combobox when it is initially rendered. Use when you do not need to control its open state. | |
open | boolean The controlled open state of the Combobox Must be binded-with with | |
searchTerm | string The controlled search term of the Combobox Should be binded-with with | |
filterFunction | (val: Array<T>, term: string) => Array<T> The custom filter function for filtering | |
displayValue | (val: T) => string The display value of input for selected item. Does not work with | |
multiple | boolean Whether multiple options can be selected or not. | |
dir | enum The reading direction of the combobox when applicable. If omitted, inherits globally from | |
name | string The name of the Combobox Submitted with its owning form as part of a name/value pair. | |
disabled | boolean When |
Emit | Type |
---|---|
@update:modelValue | (value: T) => void |
@update:open | (open: boolean) => void |
@update:searchTerm | (value: string) => void |
Anchor
Used as an anchor if you set ComboboxContent
's position to popper
.
Prop | Default | Type |
---|---|---|
as | div | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Input
The input component to search through the combobox items.
Trigger
The button that toggles the Combobox Content.
Prop | Default | Type |
---|---|---|
as | button | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
autoFocus | boolean Focus on element when mounted. |
Data Attribute | Value |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
Cancel
The button that clears the search term.
Prop | Default | Type |
---|---|---|
as | button | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Portal
When used, portals the content part into the body
.
You need to set position="popper"
for ComboboxContent
to make sure the position was automatically computed similar to Popover
or DropdownMenu
.
Prop | Default | Type |
---|---|---|
to | body | string | HTMLElement Vue native teleport component props. (to) |
Content
The component that pops out when the combobox is open.
Prop | Default | Type |
---|---|---|
position | "inline" | enum The positioning mode to use, |
bodyLock | false | boolean The document.body will be lock, and scrolling will be disabled. |
disableOutsidePointerEvents | false | boolean The hover/focus/click interactions will be disabled on elements outside the Content |
side | "bottom" | enum The preferred side of the anchor to render against when open. Will be reversed when collisions occur and |
sideOffset | 0 | number The distance in pixels from the anchor. Only available when |
align | "start" | enum The preferred alignment against the anchor. May change when collisions occur. Only available when |
alignOffset | 0 | number An offset in pixels from the |
avoidCollisions | true | boolean When |
collisionBoundary | [] | Boundary The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. Only available when |
collisionPadding | 10 | number | Padding The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: |
arrowPadding | 0 | number The padding between the arrow and the edges of the content. If your content has |
sticky | "partial" | enum The sticky behavior on the align axis. |
hideWhenDetached | false | boolean Whether to hide the content when the trigger becomes fully occluded. Only available when |
as | div | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Emit | Type |
---|---|
@closeAutoFocus | (event: Event) => void |
@escapeKeyDown | (event: KeyboardEvent) => void |
@pointerDownOutside | (event: PointerDownOutsideEvent) => void |
Data Attribute | Value |
---|---|
[data-state] | "open" | "closed" |
[data-side] | "left" | "right" | "bottom" | "top" |
[data-align] | "start" | "end" | "center" |
CSS Variable | Description |
---|---|
--radix-combobox-content-transform-origin | The transform-origin computed from the content and arrow positions/offsets. Only present when position="popper" . |
--radix-combobox-content-available-width | The remaining width between the trigger and the boundary edge. Only present when position="popper" . |
--radix-combobox-content-available-height | The remaining height between the trigger and the boundary edge. Only present when position="popper" . |
--radix-combobox-trigger-width | The width of the trigger. Only present when position="popper" . |
--radix-combobox-trigger-height | The height of the trigger. Only present when position="popper" . |
Viewport
The scrolling viewport that contains all of the items.
Prop | Default | Type |
---|---|---|
as | div | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Item
The component that contains the combobox items.
Prop | Default | Type |
---|---|---|
value* | string The value given as data when submitted with a | |
disabled | boolean When | |
as | div | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Emit | Type |
---|---|
@select | (event: SelectEvent) => void |
Data Attribute | Value |
---|---|
[data-state] | "checked" | "unchecked" |
[data-highlighted] | Present when highlighted |
[data-disabled] | Present when disabled |
ItemIndicator
Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
Prop | Default | Type |
---|---|---|
as | span | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Group
Used to group multiple items. use in conjunction with ComboboxLabel
to ensure good accessibility via automatic labelling.
Prop | Default | Type |
---|---|---|
as | div | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Label
Used to render the label of a group. It won't be focusable using arrow keys.
Prop | Default | Type |
---|---|---|
as | div | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Separator
Used to visually separate items in the Combobox
Prop | Default | Type |
---|---|---|
as | div | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
Arrow
An optional arrow element to render alongside the content. This can be used to help visually link the trigger with the ComboboxContent
. Must be rendered inside ComboboxContent
. Only available when position
is set to popper
.
Prop | Default | Type |
---|---|---|
as | svg | string | Component The element or component this component should render as. Can be overwrite by |
asChild | false | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. |
width | 10 | number The width of the arrow in pixels. |
height | 5 | number The height of the arrow in pixels. |
Examples
Binding objects as values
Unlike native HTML form controls which only allow you to provide strings as values, radix-vue
supports binding complex objects as well.
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxContent, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot } from 'radix-vue'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref(people[0])
</script>
<template>
<ComboboxRoot v-model="selectedPeople">
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxItem
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
{{ person.name }}
</ComboboxItem>
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
Selecting multiple values
The Combobox
component allows you to select multiple values. You can enable this by providing an array of values instead of a single value.
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxRoot } from 'radix-vue'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref([people[0], people[1]])
</script>
<template>
<ComboboxRoot v-model="selectedPeople" multiple>
...
</ComboboxRoot>
</template>
Custom filtering
Internally, ComboboxRoot
would apply default filter function to filter relevant ComboboxItem
(only apply when modelValue
is type string
).
However this behavior can be replaced using 2 different method.
1. Provide filter-function
props.
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxContent, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot } from 'radix-vue'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref(people[0])
function filterFunction(list: typeof people[number], searchTerm: string) {
return list.filter((person) => {
return person.name.toLowerCase().includes(searchTerm.toLowerCase())
})
}
</script>
<template>
<ComboboxRoot
v-model="selectedPeople"
:filter-function="filterFunction"
>
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxItem
v-for="person in people"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
{{ person.name }}
</ComboboxItem>
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
2. Filtered v-for
options
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxContent, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot } from 'radix-vue'
const people = [
{ id: 1, name: 'Durward Reynolds' },
{ id: 2, name: 'Kenton Towne' },
{ id: 3, name: 'Therese Wunsch' },
{ id: 4, name: 'Benedict Kessler' },
{ id: 5, name: 'Katelyn Rohan' },
]
const selectedPeople = ref(people[0])
const searchTerm = ref('')
const filteredPeople = computed(() =>
searchTerm.value === ''
? people
: people.filter((person) => {
return person.name.toLowerCase().includes(searchTerm.value.toLowerCase())
})
)
</script>
<template>
<ComboboxRoot
v-model="selectedPeople"
v-model:searchTerm="searchTerm"
>
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxItem
v-for="person in filteredPeople"
:key="person.id"
:value="person"
:disabled="person.unavailable"
>
{{ person.name }}
</ComboboxItem>
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
Custom label
By default the Combobox
will use the input contents as the label for screenreaders. If you'd like more control over what is announced to assistive technologies, use the Label component.
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxInput, ComboboxRoot, Label } from 'radix-vue'
</script>
<template>
<ComboboxRoot v-model="selectedPeople">
<Label for="person">Person: </Label>
<ComboboxInput id="person" placeholder="Select a person" />
...
</ComboboxRoot>
</template>
With disabled items
You can add special styles to disabled items via the data-disabled
attribute.
<script setup lang="ts">
import { ref } from 'vue'
import {
ComboboxContent,
ComboboxInput,
ComboboxItem,
ComboboxPortal,
ComboboxRoot,
} from 'radix-vue'
</script>
<template>
<ComboboxRoot>
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxItem class="ComboboxItem" disabled>
...
</ComboboxItem>
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
/* styles.css */
.ComboboxItem[data-disabled] {
color: "gainsboro";
}
With separators
Use the Separator
part to add a separator between items.
<script setup lang="ts">
import { ref } from 'vue'
import {
ComboboxContent,
ComboboxInput,
ComboboxItem,
ComboboxPortal,
ComboboxRoot,
ComboboxSeparator
} from 'radix-vue'
</script>
<template>
<ComboboxRoot>
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxItem>…</ComboboxItem>
<ComboboxItem>…</ComboboxItem>
<ComboboxItem>…</ComboboxItem>
<ComboboxSeparator />
<ComboboxItem>…</ComboboxItem>
<ComboboxItem>…</ComboboxItem>
<ComboboxItem>…</ComboboxItem>
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
With grouped items
Use the Group
and Label
parts to group items in a section.
<script setup lang="ts">
import { ref } from 'vue'
import {
ComboboxContent,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxPortal,
ComboboxRoot
} from 'radix-vue'
</script>
<template>
<ComboboxRoot>
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxGroup>
<ComboboxLabel>Label</ComboboxLabel>
<ComboboxItem>…</ComboboxItem>
<ComboboxItem>…</ComboboxItem>
<ComboboxItem>…</ComboboxItem>
</ComboboxGroup>
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
With complex items
You can use custom content in your items.
<script setup lang="ts">
import { ref } from 'vue'
import {
ComboboxContent,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxItemIndicator,
ComboboxLabel,
ComboboxPortal,
ComboboxRoot
} from 'radix-vue'
</script>
<template>
<ComboboxRoot>
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxItem>
<img src="…">
Adolfo Hess
<ComboboxItemIndicator />
</ComboboxItem>
…
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
Prevent select behavior
By default, selecting ComboboxItem
would close the content, and update the modelValue
with the provided value. You can prevent this behavior by preventing default @select.prevent
.
<script setup lang="ts">
import { ref } from 'vue'
import { ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot } from 'radix-vue'
</script>
<template>
<ComboboxRoot>
<ComboboxInput />
<ComboboxPortal>
<ComboboxContent>
<ComboboxItem @select.prevent>
Item A
</ComboboxItem>
…
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
Accessibility
Adheres to the Combobox WAI-ARIA design pattern.
See the W3C Combobox Autocomplete List example for more information.
Keyboard Interactions
Key | Description |
---|---|
Enter | When focus is on ComboboxItem , selects the focused item. |
ArrowDown | When focus is on ComboboxInput , opens the combobox content. When focus is on an item, moves focus to the next item. |
ArrowUp | When focus is on ComboboxInput , opens the combobox content. When focus is on an item, moves focus to the previous item. |
Esc | Closes combobox and restores the selected item in the ComboboxInput field. |
Custom APIs
Create your own API by abstracting the primitive parts into your own component.
Command Menu
Combobox can be use to build your own Command Menu.
Usage
<script setup lang="ts">
import { Command, CommandItem } from './your-command'
</script>
<template>
<Command>
<CommandItem value="1">
Item 1
</CommandItem>
<CommandItem value="2">
Item 2
</CommandItem>
<CommandItem value="3">
Item 3
</CommandItem>
</Command>
</template>
Implementation
// your-command.ts
export { default as Command } from 'Command.vue'
export { default as CommandItem } from 'CommandItem.vue'
<!-- Command.vue -->
<script setup lang="ts">
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from '@radix-icons/vue'
import { ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxPortal, ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
const props = defineProps<ComboboxRootProps>()
const emits = defineEmits<ComboboxRootEmits>()
const forward = useForwardPropsEmits(props, emits)
</script>
<template>
<ComboboxRoot v-bind="forward" :open="true" model-value="">
<ComboboxInput placeholder="Type a command or search..." />
<ComboboxPortal>
<ComboboxContent>
<ComboboxEmpty />
<ComboboxViewport>
<slot />
</ComboboxViewport>
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>
</template>
<!-- ComboboxItem.vue -->
<script setup lang="ts">
import { CheckIcon } from '@radix-icons/vue'
import { ComboboxItem, type ComboboxItemProps } from 'radix-vue'
const props = defineProps<ComboboxItemProps>()
</script>
<template>
<ComboboxItem v-bind="props" @select.prevent>
<slot />
</ComboboxItem>
</template>