Autocomplete
An input that suggests options as you type.
Usage guidelines
- Avoid when selection state is needed: Use Combobox instead of Autocomplete if the selection should be remembered and the input value cannot be custom. Unlike Combobox, Autocomplete's input can contain free-form text, as its suggestions only optionally autocomplete the text.
- Can be used for filterable command pickers: The input can be used as a filter for command items that perform an action when clicked when rendered inside the popup.
- Form controls must have an accessible name: It can be created using a
<label>element or theFieldcomponent. See the forms guide. - Closing animations: The popup stays rendered until its closing animation finishes. See Manual unmounting for animating it with a JavaScript library and for manual control.
Anatomy
Import the components and place them together:
Item values
Each <Autocomplete.Item> takes a value prop identifying it. Pass the item being rendered, so that props like itemToStringValue receive it.
Examples
Async search
Load items asynchronously while typing and render custom status content.
Inline autocomplete
Autofill the input with the highlighted item while navigating with arrow keys using the mode prop. Accepts aria-autocomplete values list, both, inline, or none.
Grouped
Organize related options with <Autocomplete.Group> and <Autocomplete.GroupLabel> to add section headings inside the popup.
Groups are represented by an array of objects with an items property, which itself is an array of individual items for each group. An extra property, such as value, can be provided for the heading text when rendering the group label.
Fuzzy matching
Use fuzzy matching to find relevant results even when the query doesn't exactly match the item text.
Limit results
Limit the number of visible items using the limit prop and guide users to refine their query using <Autocomplete.Status>.
Auto highlight
The first matching item can be automatically highlighted as the user types by specifying the autoHighlight prop on <Autocomplete.Root>. Set the prop's value to "always" if the highlight should always be present, such as when the list is rendered inline within a dialog.
The prop can be combined with the keepHighlight and highlightItemOnHover props to configure how the highlight behaves during mouse interactions.
Command palette
Use the autocomplete input to filter a list of command items that perform an action when clicked.
Grid layout
Display items in a grid layout, wrapping each row in <Autocomplete.Row> components.
Virtualized
Efficiently handle large datasets using a virtualization library like @tanstack/svelte-virtual. Set virtualized on <Autocomplete.Root> and pass each rendered <Autocomplete.Item> its position in the filtered items as index. This demo filters the items itself and passes them as filteredItems, so that one component can render the window without a separate part calling Autocomplete.useFilteredItems().
Memoizing items
Memoizing each item is a React technique for datasets up to roughly 1,000 items, and Svelte needs no equivalent. <Autocomplete.Collection> keeps the item for each unchanged value, so unchanged items skip re-rendering while the user types. While this speeds up typing, it does not speed up opening; with a large enough number of items, the mount cost dominates, and virtualization becomes necessary to keep the open interaction fast on low-end devices.
API reference
Root
Groups all parts of the autocomplete. Renders no element of its own, only the hidden input a form validates.
id string —
- Name
- Description
The id of the component.
- Type
string
disabled boolean false
- Name
- Description
Whether the component ignores user interaction.
- Type
boolean- Default
false
form string —
- Name
- Description
Id of the form the hidden inputs belong to, for a combobox rendered outside it.
- Type
string
name string —
- Name
- Description
Identifies the field when a form is submitted.
- Type
string
value string | null —
- Name
- Description
The text in the input, which is the value the form submits. Use
bind:valueto share it with the parent. Without a binding it starts fromdefaultValue.- Type
string | null- Binding
bind:value
modal boolean false
- Name
- Description
Whether the popup is modal while open: page scroll is locked and outside pointer interaction is blocked.
- Type
boolean- Default
false
onOpenChange function —
- Name
- Description
Called before the popup opens or closes. Call
eventDetails.cancel()to veto it.- Type
(open: boolean, eventDetails: ComboboxOpenChangeEventDetails) => void
open boolean false
- Name
- Description
Whether the popup is open. Use
bind:opento share it with the parent.- Type
boolean- Default
false- Binding
bind:open
onOpenChangeComplete function —
- Name
- Description
Called after the open or close animations finish.
- Type
(open: boolean) => void
itemToStringValue function —
- Name
- Description
Converts an object item value to the text shown in the input and submitted with the form. A
{ value, label }object uses itslabelwithout it.- Type
(itemValue: ItemValue) => string
filteredItems readonly ItemValue[] | readonly Group<ItemValue>[] —
- Name
- Description
Items filtered by the consumer. The list shows them instead of filtering
itemsitself. Keep the flat or grouped shape ofitems.- Type
readonly ItemValue[] | readonly Group<ItemValue>[]
openOnInputClick boolean false
- Name
- Description
Whether the popup opens when the input is pressed.
- Type
boolean- Default
false
onItemHighlighted function —
- Name
- Description
Called when an item is highlighted or the highlight is cleared (
undefined).- Type
(itemValue: Value | undefined, eventDetails: ComboboxHighlightEventDetails) => void
required boolean false
- Name
- Description
Whether a value must be chosen before the form submits.
- Type
boolean- Default
false
readonly boolean false
- Name
- Description
Whether the user can browse the items but not choose a different one.
- Type
boolean- Default
false
keepHighlight boolean false
- Name
- Description
Whether the highlighted item stays highlighted when the pointer leaves the list.
- Type
boolean- Default
false
highlightItemOnHover boolean true
- Name
- Description
Whether moving the pointer over items highlights them. Set
falseto tell CSS:hoverapart from thedata-highlightedstate.- Type
boolean- Default
true
loopFocus boolean true
- Name
- Description
Whether the arrow keys loop from the last item back to the input and then the first item.
- Type
boolean- Default
true
grid boolean false
- Name
- Description
Whether items are laid out in a grid of
Combobox.Rows. The arrow keys move across rows and columns.- Type
boolean- Default
false
filter function | null —
- Name
- Description
Matches an item against the query.
nulldisables filtering. Receives the source item of acreateItems()collection.- Type
((item: Item, query: string, itemToString?: (item: Item) => string) => boolean) | null
inline boolean false
- Name
- Description
Whether the list renders inline instead of in a popup. Set
openwith it.- Type
boolean- Default
false
virtualized boolean false
- Name
- Description
Whether an external virtualizer renders a window of the items. Give each rendered item its
index, or avaluefromitemsto look its index up. Typing leaves the list scroll to the virtualizer.- Type
boolean- Default
false
limit number -1
- Name
- Description
The maximum number of items the list shows.
-1shows all.- Type
number- Default
-1
locale Intl.LocalesArgument —
- Name
- Description
The locale used to compare strings. Defaults to the runtime locale.
- Type
Intl.LocalesArgument
submitOnItemClick boolean false
- Name
- Description
Whether pressing an item submits the owning form.
- Type
boolean- Default
false
defaultValue string —
- Name
- Description
The text the input starts with and the text a form reset restores.
- Type
string
onValueChange function —
- Name
- Description
Called before the input text changes. Call
eventDetails.cancel()to keep the text.- Type
(value: string, eventDetails: AutocompleteChangeEventDetails) => void
mode AutocompleteMode 'list'
- Name
- Description
How the list filters and whether the input completes inline with the highlighted item.
- Type
AutocompleteMode- Default
'list'
autoHighlight boolean | 'always' false
- Name
- Description
Whether the first matching item is highlighted automatically.
truehighlights it once the user types and keeps it while the query changes.'always'highlights it as soon as the list opens.- Type
boolean | 'always'- Default
false
items Items —
- Name
- Description
The items of the list: flat, or groups with an
itemsarray.- Type
Items
Value
The text in the autocomplete's input. Renders no element.
children Snippet<[value: string]> —
- Name
- Description
Formats the input text. Without it the text renders as is.
- Type
Snippet<[value: string]>
Input
A text input to search for items in the list. Renders an <input> element.
disabled boolean | null false
- Name
- Description
Whether the input ignores user interaction.
- Type
boolean | null- Default
false
render Snippet<[props: HTMLInputAttributes, state: ComboboxInputState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLInputAttributes, state: ComboboxInputState, children: Snippet | undefined]>
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
disabled boolean
- Name
disabled- Description
Whether the control ignores user interaction.
- Type
boolean
readOnly boolean
- Name
readOnly- Description
Whether the combobox is read-only.
- Type
boolean
popupSide Side | null
- Name
popupSide- Description
The side the popup is placed on, while it is mounted.
- Type
Side | null
listEmpty boolean
- Name
listEmpty- Description
Whether the filtered list has no items.
- Type
boolean
touched boolean
- Name
touched- Description
Whether the field has been touched.
- Type
boolean
dirty boolean
- Name
dirty- Description
Whether the field value has changed from its initial value.
- Type
boolean
valid boolean | null
- Name
valid- Description
Whether the field is valid.
nullmeans validity is not known yet.- Type
boolean | null
filled boolean
- Name
filled- Description
Whether the field has a value.
- Type
boolean
focused boolean
- Name
focused- Description
Whether the field is focused.
- Type
boolean
data-popup-open
data-popup-side
data-list-empty
data-pressed
data-disabled
data-readonly
data-required
data-valid
data-invalid
data-dirty
data-touched
data-filled
data-focused
InputGroup
Groups the input with its related controls. Renders a <div> element.
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AutocompleteInputGroupState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AutocompleteInputGroupState, children: Snippet | undefined]>
disabled boolean
- Name
disabled- Description
Whether the control ignores user interaction.
- Type
boolean
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
readOnly boolean
- Name
readOnly- Description
Whether the combobox is read-only.
- Type
boolean
popupSide Side | null
- Name
popupSide- Description
The side the popup is placed on, while it is mounted.
- Type
Side | null
listEmpty boolean
- Name
listEmpty- Description
Whether the filtered list has no items.
- Type
boolean
touched boolean
- Name
touched- Description
Whether the field has been touched.
- Type
boolean
dirty boolean
- Name
dirty- Description
Whether the field value has changed from its initial value.
- Type
boolean
valid boolean | null
- Name
valid- Description
Whether the field is valid.
nullmeans validity is not known yet.- Type
boolean | null
filled boolean
- Name
filled- Description
Whether the field has a value.
- Type
boolean
focused boolean
- Name
focused- Description
Whether the field is focused.
- Type
boolean
data-popup-open
data-popup-side
data-list-empty
data-pressed
data-disabled
data-readonly
data-valid
data-invalid
data-dirty
data-touched
data-filled
data-focused
Trigger
A button that opens the popup. Renders a <button> element.
id string | null —
- Name
- Description
The trigger's id. With the input inside the popup, defaults to the root's id.
- Type
string | null
disabled boolean | null —
- Name
- Description
Whether the trigger ignores user interaction.
- Type
boolean | null
nativeButton boolean true
- Name
- Description
Whether the host is a native
<button>. Setfalsewhenrendersupplies a non-button element.- Type
boolean- Default
true
render Snippet<[props: HTMLButtonAttributes, state: AutocompleteTriggerState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLButtonAttributes, state: AutocompleteTriggerState, children: Snippet | undefined]>
disabled boolean
- Name
disabled- Description
Whether the control ignores user interaction.
- Type
boolean
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
readOnly boolean
- Name
readOnly- Description
Whether the combobox is read-only.
- Type
boolean
popupSide Side | null
- Name
popupSide- Description
The side the popup is placed on, while it is mounted.
- Type
Side | null
listEmpty boolean
- Name
listEmpty- Description
Whether the filtered list has no items.
- Type
boolean
touched boolean
- Name
touched- Description
Whether the field has been touched.
- Type
boolean
dirty boolean
- Name
dirty- Description
Whether the field value has changed from its initial value.
- Type
boolean
valid boolean | null
- Name
valid- Description
Whether the field is valid.
nullmeans validity is not known yet.- Type
boolean | null
filled boolean
- Name
filled- Description
Whether the field has a value.
- Type
boolean
focused boolean
- Name
focused- Description
Whether the field is focused.
- Type
boolean
data-popup-open
data-popup-side
data-list-empty
data-pressed
data-disabled
data-readonly
data-required
data-valid
data-invalid
data-dirty
data-touched
data-filled
data-focused
Icon
An icon that shows the control opens a popup. Renders a <span> element.
render Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: ComboboxIconState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: ComboboxIconState, children: Snippet | undefined]>
Clear
Clears the value when clicked. Renders a <button> element.
disabled boolean | null false
- Name
- Description
Whether the button ignores user interaction.
- Type
boolean | null- Default
false
nativeButton boolean true
- Name
- Description
Whether the host is a native
<button>.- Type
boolean- Default
true
keepMounted boolean false
- Name
- Description
Whether the button stays in the DOM while there is nothing to clear.
- Type
boolean- Default
false
render Snippet<[props: HTMLButtonAttributes, state: ComboboxClearState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLButtonAttributes, state: ComboboxClearState, children: Snippet | undefined]>
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
disabled boolean
- Name
disabled- Description
Whether the button ignores user interaction.
- Type
boolean
visible boolean
- Name
visible- Description
Whether there is something to clear.
- Type
boolean
transitionStatus 'starting' | 'ending' | 'idle' | undefined
- Name
transitionStatus- Type
'starting' | 'ending' | 'idle' | undefined
data-popup-open
data-disabled
data-visible
data-starting-style
data-ending-style
List
A list container for the items. Renders a <div> element.
children Snippet —
- Name
- Description
The list content. Render
Combobox.Collectioninside to map the filtered items.- Type
Snippet
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxListState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxListState, children: Snippet | undefined]>
empty boolean
- Name
empty- Description
Whether the filtered list has no items.
- Type
boolean
Portal
A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>.
keepMounted boolean false
- Name
- Description
Keep the portal mounted while the popup is closed.
- Type
boolean- Default
false
container HTMLElement | ShadowRoot | null —
- Name
- Description
Element the portal is appended to.
undefineduses the parent portal ordocument.body.nullwaits and does not mount until an element or shadow root is set. There is no ref object.- Type
HTMLElement | ShadowRoot | null
render Snippet<[props: HTMLAttributes<HTMLDivElement> & Record<symbol, Attachment<HTMLDivElement>>, state: ComboboxPortalState, children: Snippet | undefined]> —
- Name
- Description
Replace the portal element. Host props include the move attachment.
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement> & Record<symbol, Attachment<HTMLDivElement>>, state: ComboboxPortalState, children: Snippet | undefined]>
Backdrop
An overlay displayed beneath the popup. Renders a <div> element.
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxBackdropState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxBackdropState, children: Snippet | undefined]>
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
transitionStatus 'starting' | 'ending' | 'idle' | undefined
- Name
transitionStatus- Type
'starting' | 'ending' | 'idle' | undefined
data-open
data-closed
data-starting-style
data-ending-style
Positioner
Positions the popup against the input, input group or trigger. Renders a <div> element.
anchor Anchor —
- Name
- Description
An element to position the popup against. Defaults to the input group, input or trigger.
- Type
Anchor
positionMethod "absolute" | "fixed" 'absolute'
- Name
- Description
Which CSS
positionthe positioner uses.- Type
"absolute" | "fixed"- Default
'absolute'
side Side 'bottom'
- Name
- Description
Which side of the anchor to place the popup on. It can flip to avoid collisions.
- Type
Side- Default
'bottom'
align Align 'center'
- Name
- Description
How to align the popup on its side.
- Type
Align- Default
'center'
sideOffset number | OffsetFunction 0
- Name
- Description
Distance between the anchor and the popup in pixels, or a function of the anchor and positioner sizes, side and alignment.
- Type
number | OffsetFunction- Default
0
alignOffset number | OffsetFunction 0
- Name
- Description
Offset along the alignment axis in pixels, or a function like
sideOffset.- Type
number | OffsetFunction- Default
0
collisionBoundary Boundary 'clipping-ancestors'
- Name
- Description
The area the popup is confined to.
- Type
Boundary- Default
'clipping-ancestors'
collisionPadding Padding 5
- Name
- Description
Space to keep from the edge of the collision boundary.
- Type
Padding- Default
5
arrowPadding number 5
- Name
- Description
Minimum distance between the arrow and the edges of the popup.
- Type
number- Default
5
sticky boolean false
- Name
- Description
Whether the popup stays in the viewport after the anchor scrolls out of view.
- Type
boolean- Default
false
disableAnchorTracking boolean false
- Description
Whether the popup stops following layout shifts of its anchor.
- Type
boolean- Default
false
collisionAvoidance CollisionAvoidance —
- Name
- Description
How the popup avoids collisions. Dropdowns flip on the side axis and shift on the other.
- Type
CollisionAvoidance
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxPositionerState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxPositionerState, children: Snippet | undefined]>
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
side Side
- Name
side- Description
The side of the anchor the popup is placed on.
- Type
Side
align Align
- Name
align- Description
The alignment of the popup relative to the anchor.
- Type
Align
anchorHidden boolean
- Name
anchorHidden- Description
Whether the anchor is hidden.
- Type
boolean
empty boolean
- Name
empty- Description
Whether the filtered list has no items.
- Type
boolean
data-open
data-closed
data-anchor-hidden
data-align
data-empty
data-side
--anchor-height
--anchor-width
--available-height
--available-width
--transform-origin
Popup
A container for the list. Renders a <div> element.
initialFocus ComboboxFocusTarget —
- Name
- Description
The element to focus when the popup opens. With the input inside the popup, the default focuses the input, or the popup on touch.
- Type
ComboboxFocusTarget
finalFocus ComboboxFocusTarget —
- Name
- Description
The element to focus when the popup closes. With the input inside the popup, the default focuses the trigger. Otherwise focus stays where it is.
- Type
ComboboxFocusTarget
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxPopupState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxPopupState, children: Snippet | undefined]>
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
side Side
- Name
side- Description
The side of the anchor the popup is placed on.
- Type
Side
align Align
- Name
align- Description
The alignment of the popup relative to the anchor.
- Type
Align
anchorHidden boolean
- Name
anchorHidden- Description
Whether the anchor is hidden.
- Type
boolean
transitionStatus 'starting' | 'ending' | 'idle' | undefined
- Name
transitionStatus- Type
'starting' | 'ending' | 'idle' | undefined
empty boolean
- Name
empty- Description
Whether the filtered list has no items.
- Type
boolean
data-open
data-closed
data-anchor-hidden
data-align
data-empty
data-side
data-starting-style
data-ending-style
Arrow
Displays an element positioned against the anchor. Renders a <div> element.
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxArrowState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxArrowState, children: Snippet | undefined]>
open boolean
- Name
open- Description
Whether the popup is open.
- Type
boolean
side Side
- Name
side- Description
The side of the anchor the popup is placed on.
- Type
Side
align Align
- Name
align- Description
The alignment of the popup relative to the anchor.
- Type
Align
uncentered boolean
- Name
uncentered- Description
Whether the arrow cannot be centered on the anchor.
- Type
boolean
data-open
data-closed
data-uncentered
data-align
data-side
Status
Announces status messages, such as a loading state, politely to screen readers. Keep it mounted and change its children, so screen readers announce the change. Renders a <div> element.
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxStatusState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxStatusState, children: Snippet | undefined]>
Empty
Renders its children only while the filtered list is empty, and announces them politely to screen readers. Requires the items prop on the root. Keep it mounted: hide its children, not the element. Renders a <div> element.
children Snippet —
- Name
- Description
Shown while the filtered list has no items.
- Type
Snippet
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxEmptyState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxEmptyState, children: Snippet | undefined]>
Collection
Renders its snippet for each filtered item, or each item of the surrounding group. Renders no element of its own.
children* Snippet<[item: never, index: number]> —
- Name
- Description
Rendered for each filtered item, or each item of the surrounding
Combobox.Group.- Type
Snippet<[item: never, index: number]>
Row
A row of items in a grid list. Renders a <div> element.
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxRowState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxRowState, children: Snippet | undefined]>
Item
An item in the list. Pressing it fills the input with its text. Renders a <div> element.
disabled boolean | null false
- Name
- Description
Whether the item ignores user interaction.
- Type
boolean | null- Default
false
value unknown null
- Name
- Description
The value this item selects.
- Type
unknown- Default
null
nativeButton boolean false
- Name
- Description
Whether the host is a native
<button>.- Type
boolean- Default
false
index number —
- Name
- Description
The item's position in the list. Without it the item takes its position from the document order, or from
itemswhen the root isvirtualized.- Type
number
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AutocompleteItemState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AutocompleteItemState, children: Snippet | undefined]>
disabled boolean
- Name
disabled- Description
Whether the item ignores user interaction.
- Type
boolean
highlighted boolean
- Name
highlighted- Description
Whether the item is highlighted.
- Type
boolean
data-highlighted
data-disabled
Group
Groups related items with their label. Renders a <div> element.
items readonly unknown[] —
- Name
- Description
The group's items, which a
Combobox.Collectioninside renders.- Type
readonly unknown[]
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxGroupState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxGroupState, children: Snippet | undefined]>
GroupLabel
The label of a group. Renders a <div> element.
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxGroupLabelState, children: Snippet | undefined]> —
- Name
- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: ComboboxGroupLabelState, children: Snippet | undefined]>
Separator
A visual separator between items or groups. Renders a <div> element.
orientation "horizontal" | "vertical" 'horizontal'
- Name
- Description
The orientation of the separator.
- Type
"horizontal" | "vertical"- Default
'horizontal'
render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SeparatorState, children: Snippet | undefined]> —
- Name
- Description
Replace the default
<div>. Spreadpropsonto the host element.- Type
Snippet<[props: HTMLAttributes<HTMLDivElement>, state: SeparatorState, children: Snippet | undefined]>
orientation 'horizontal' | 'vertical'
- Name
orientation- Description
The orientation of the separator.
- Type
'horizontal' | 'vertical'
data-orientation
useFilter
Matches items against a query using Intl.Collator for robust string matching.
This is a plain function, not a hook: call it in a $derived when its options change. It is used when externally filtering items.
| Parameter | Type | Default | Description |
|---|---|---|---|
| options? | AutocompleteFilterOptions | {} | - |
Returns an AutocompleteFilter:
useFilteredItems
Returns the internally filtered items when called inside <Autocomplete.Root>.
Call it while a part initializes. It returns an object whose current is the filtered items. Treat the result as read-only: it is internal state and may be a shared frozen array.