# Autocomplete
Suggest text while someone types, without limiting what they can enter.
Use Autocomplete for a text field with helpful suggestions. Choosing one fills in the field, but any text is a valid value. Use [Combobox](/docs/solid/components/combobox) when the value should be a selected option instead.
```tsx title="demo.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Favorite fruit
No fruits found.
{(fruit) => (
{fruit}
)}
)
}
export { Example }
```
Type “man”, press Down Arrow, then Enter to fill in Mango. You can also leave text that is not in the list.
## Installation
```bash
npm install @ui-sdk/solid @ui-sdk/core
```
## Composition
Use the following composition to build an `Autocomplete`:
```text
Autocomplete
├── AutocompleteLabel
├── AutocompleteInput
└── AutocompleteContent
├── AutocompleteEmpty
└── AutocompleteList
├── AutocompleteItem
└── AutocompleteItem
```
Name the input, then put suggestions in a list inside the popup. Each suggestion needs a unique value.
## Usage
Import the parts and put them together:
```tsx
import {
Autocomplete,
AutocompleteContent,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
function Example() {
return (
FruitAppleBanana
)
}
export { Example }
```
## Autocomplete vs Combobox
Both filter a list as you type. They differ in what the value is.
- **Autocomplete**: the value is the text. Suggestions help fill it in, and anything typed is valid. Use it for a search box, an address or a free-form field.
- **[Combobox](/docs/solid/components/combobox)**: the value is an option from the list, or several with `multiple`. The text is only a query; closing without choosing restores the selected label, and a form submits the value, not the text. Use it for a country, an assignee or a set of labels.
## Build Your Own
`@ui-sdk/solid/autocomplete` comes with a ready-made Autocomplete. If you'd like to build your own, with your own names, start from the `autocomplete` primitive in `@ui-sdk/core`:
```ts title="fruit-search.ts"
import { autocomplete } from "@ui-sdk/core/autocomplete"
import { createParts } from "@ui-sdk/solid/primitive"
const {
Root: FruitSearch,
Label: FruitLabel,
Input: FruitInput,
Content: FruitPopup,
List: FruitList,
Item: FruitOption,
Empty: FruitEmpty,
} = createParts(autocomplete, {
label: "label",
input: "input",
content: "div",
list: "div",
item: "div",
empty: "div",
})
export {
FruitEmpty,
FruitInput,
FruitLabel,
FruitList,
FruitOption,
FruitPopup,
FruitSearch,
}
```
```tsx
FruitNo fruits found.AppleMango
```
Each part keeps the behavior, state and data attributes of its ready-made counterpart: typing filters the options, arrow keys move the highlight and the popup opens in the top layer. See [Rendering](/docs/solid/rendering) and [Custom Parts](/docs/solid/custom-parts) for more.
## Disabled
A disabled field cannot be focused or changed and submits nothing. A read-only field stays focusable and submits its value, but does not open or accept changes. Disabled suggestions are skipped by keyboard navigation and cannot fill in the field.
```tsx title="disabled.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Disabled
Read-only
Some suggestions disabled
{(fruit, index) => (
{fruit}
)}
)
}
export { Example }
```
Try the Disabled and Read-only fields. In Disabled suggestion, type “b”: arrow keys skip Banana and a press cannot choose it.
## Clear and Trigger
`AutocompleteClear` empties the field and returns focus to it. `AutocompleteTrigger` lets someone open the suggestions without typing. Give the trigger a label that describes what it opens.
```tsx title="clear.tsx"
import {
Autocomplete,
AutocompleteClear,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
AutocompleteTrigger,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Fruit
No fruits found.
{(fruit) => (
{fruit}
)}
)
}
export { Example }
```
Clear Mango, then press Show fruits to open the suggestions. The clear button disappears while the field is empty.
## Open on Focus
Add `openOnFocus` to offer suggestions as soon as the input receives focus. This works well when there are useful choices before someone types.
```tsx title="open-on-focus.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteGroup,
AutocompleteGroupLabel,
AutocompleteInput,
AutocompleteItem,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const recent = ["react hooks", "tailwind grid", "web components", "vue v-model"]
function Example() {
return (
No results.Recent searches
{(search) => (
{search}
)}
)
}
export { Example }
```
Focus Search docs to see recent searches before typing. Escape closes them; pressing the field opens them again.
## Auto Highlight
`autoHighlight` highlights the first match while typing, so Enter can choose it immediately. Set `loop` to `false` to stop arrow keys at either end of the list.
```tsx title="auto-highlight.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Fruit
No fruits found.
{(fruit) => (
{fruit}
)}
)
}
export { Example }
```
Type “pe” and press Enter to choose the first match. Arrow keys stop at the ends because this example disables looping.
## Inline Completion
`inlineComplete` fills in the rest of the first suggestion that starts with the typed text, with the added text selected. Arrow keys fill in the suggestion they highlight. End or Right Arrow accepts the completion; Backspace or Escape takes it back out.
```tsx title="inline.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Fruit
No fruits found.
{(fruit) => (
{fruit}
)}
)
}
export { Example }
```
Type “bl” to complete blackberry inline. Backspace removes the completion; Down Arrow fills in Blueberry. Press End to accept the text.
## Highlight Matches
`AutocompleteItemText` marks the matching text, ignoring case and accents using the current locale. Its state exposes the matching segments when you want to render them yourself, as this example does in bold.
```tsx title="highlight.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteItemText,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Favorite fruit
No fruits found.
{(fruit) => (
{(state) =>
state.segments.map((segment) =>
segment.match ? (
{segment.text}
) : (
segment.text
)
)
}
)}
)
}
export { Example }
```
Type “berry”. The matching letters are bold while each suggestion keeps its original spelling.
## Filter and Keywords
The default filter matches text anywhere in a suggestion. Use `"startsWith"` or `"fuzzy"` for a different match, a function for your own filter, or `false` for results already filtered by a server. `keywords` adds searchable text without changing what goes in the field.
```tsx title="filter.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const tags = [
{ value: "feature", label: "feature", keywords: ["enhancement", "request"] },
{ value: "fix", label: "fix", keywords: ["bug", "patch"] },
{ value: "docs", label: "docs", keywords: ["documentation", "readme"] },
{ value: "performance", label: "performance", keywords: ["speed", "slow"] },
{ value: "security", label: "security", keywords: ["vulnerability"] },
{ value: "refactor", label: "refactor", keywords: ["cleanup"] },
]
function Example() {
return (
Tag
No tags found.
{(tag) => (
{tag.label}
{tag.keywords[0]}
)}
)
}
export { Example }
```
Type “bug” to find fix through its keywords. Type “re” to find labels or keywords that start with those letters.
## Groups
Use `AutocompleteGroup` and `AutocompleteGroupLabel` to name related suggestions. Filtering hides empty groups and separators.
```tsx title="groups.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteGroup,
AutocompleteGroupLabel,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
AutocompleteSeparator,
} from "@ui-sdk/solid/autocomplete"
import { For, Show } from "solid-js"
const fruitGroups = [
{
label: "Tree fruits",
items: ["Apple", "Apricot", "Cherry", "Lemon", "Peach", "Pear"],
},
{
label: "Berries",
items: ["Blackberry", "Blueberry", "Grape", "Strawberry"],
},
{ label: "Tropical", items: ["Avocado", "Banana", "Mango", "Pineapple"] },
]
function Example() {
return (
Fruit
No fruits found.
{(group, index) => (
<>
0}>
{group.label}
{(fruit) => (
{fruit}
)}
)}
)
}
export { Example }
```
Type “an”. Banana and Mango remain in Tropical; groups with no matches disappear.
## Icons
`AutocompleteItemIcon` keeps decorative icons out of accessible names, filtering, and the text put in the field. Add `mirror` for directional icons. An icon-only suggestion still needs an `aria-label`.
```tsx title="icons.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteItemIcon,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import type { JSX } from "@solidjs/web"
import { For } from "solid-js"
function Icon(props: { children: JSX.Element }) {
return (
)
}
const Star = () => (
)
const Pencil = () => (
)
const Reply = () => (
)
const File = () => (
)
const Archive = () => (
)
const Clock = () => (
)
const mailSearches = [
{ value: "Starred", icon: Star },
{ value: "Drafts", icon: Pencil },
{ value: "Replies", icon: Reply, mirror: true },
{ value: "Attachments", icon: File },
{ value: "Archived", icon: Archive },
{ value: "Scheduled", icon: Clock },
]
function Example() {
return (
No searches found.
{(search) => (
{search.value}
)}
)
}
export { Example }
```
Type “rep” and choose Replies. The icon stays out of the text put in the field.
## Items as Data
Map an array into parts when you want to write the markup yourself. This example maps fruit groups and adds a separator between them.
```tsx title="data.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteGroup,
AutocompleteGroupLabel,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
AutocompleteSeparator,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruitGroups = [
{
label: "Tree fruits",
fruits: ["Apple", "Apricot", "Cherry", "Lemon", "Peach", "Pear"],
},
{
label: "Berries",
fruits: ["Blackberry", "Blueberry", "Grape", "Strawberry"],
},
{ label: "Tropical", fruits: ["Avocado", "Banana", "Mango", "Pineapple"] },
]
function Example() {
return (
Fruit
No fruits found.
{(group, index) => (
<>
{index() > 0 && }
{group.label}
{(fruit) => (
{fruit}
)}
)}
)
}
export { Example }
```
Open the list to see three fruit groups. Type “an” to narrow them to Banana and Mango.
Pass `items` when the autocomplete needs the whole collection, such as server results or recent searches. It can render bare parts for you. To style changing results, render from the list’s `state.items`. [Lists and Menus](/docs/solid/lists-and-menus) covers the `ListData` format.
Suggestions can change while the list is open. The highlight stays with its suggestion, and the typed text stays unchanged. Removing the highlighted suggestion clears the highlight.
## Controlled
The value is always a string. Control it with `value` and `onValueChange`, or start uncontrolled with `defaultValue`. Suggestions have a separate `open` state and `onOpenChange`. Callbacks receive the proposed value first, then change details. Call `details.cancel()` to reject a text or open change. [State and Events](/docs/solid/state-and-events) covers controlled state and cancellation.
```tsx title="controlled.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { createSignal, For } from "solid-js"
import { useLog } from "./log"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
const [value, setValue] = createSignal("")
const [open, setOpen] = createSignal(false)
const log = useLog()
return (
)
}
export { Example }
```
Type more than 12 characters and the extra text is refused. The console shows each change and its reason.
## Controller
Create a `createAutocompleteController()` for one instance and pass it as `controller`. It can `setValue()`, `clear()`, `focus()`, `setOpen()`, or read `getValue()` and `isOpen()`. `open()` returns a promise that resolves when the popup closes, including abort and unmount; `close()` closes it. See [Controllers](/docs/solid/controllers) for lifecycle and change options.
```tsx title="controller.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
createAutocompleteController,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
const fruit = createAutocompleteController()
function Example() {
return (
FruitNo fruits found.
{(item) => (
{item}
)}
)
}
export { Example }
```
Use the buttons to open the suggestions, type Pea, clear the field or focus it from outside.
## Positioning
Use `side`, `align`, offsets, or a custom `anchor` to position the suggestions. `container` chooses where they render, and `keepMounted` keeps closed content in the DOM. [Popups](/docs/solid/popups) covers positioning, portals, animation, and modal behavior.
```tsx title="positioning.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { createSignal, For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
]
function Example() {
const [box, setBox] = createSignal(null)
return (
Fruit
No fruits found.
{(fruit) => (
{fruit}
)}
)
}
export { Example }
```
Open the suggestions. They appear above the card, aligned to its end.
## Animation
The content has `data-starting-style` while it opens and `data-ending-style` while it closes. Transition from those states, and the popup stays mounted until the exit finishes:
```css
[data-slot="autocomplete-content"] {
transition:
opacity 0.15s,
translate 0.2s cubic-bezier(0.22, 1, 0.36, 1);
&:is([data-starting-style], [data-ending-style]) {
opacity: 0;
translate: 0 -6px;
}
}
```
```tsx title="animation.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Favorite fruit
No fruits found.
{(fruit) => (
{fruit}
)}
)
}
export { Example }
```
Type to open the suggestions. They slide and fade in, and fade out before they unmount.
## Presentation
`presentation="sheet"` opens suggestions in a sheet. `"auto"` chooses a sheet on small touch screens and a popover elsewhere, each time the list opens. The server starts with the popover.
The same input moves into the sheet’s header. Opening by touch leaves the keyboard closed; tapping the input opens it and expands the sheet. Choosing a suggestion or swiping down closes it. Keyboard and mouse opening preserve input focus.
A sheet is modal unless `modal` is `false`. Give it a height, keep suggestions inside `AutocompleteList`, and leave the content’s `translate` alone so dragging can move it. Use `data-presentation` to style both presentations and `--sheet-backdrop` to set the dimmed background.
```tsx title="presentation.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
return (
Favorite fruit
No fruits found.
{(fruit) => (
{fruit}
)}
)
}
export { Example }
```
Open the field to see a sheet. On touch, tap the field in its header to show the keyboard, or swipe down to close it.
## Forms
The native input is the form control: `name` gives its submitted key, `required` rejects empty text, and reset restores `defaultValue`. Text does not have to match a suggestion. Use `form` to associate the field with a form elsewhere in the page.
```tsx title="form.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@ui-sdk/solid/field"
import { For } from "solid-js"
import { useLog } from "./log"
const fruits = [
"Apple",
"Apricot",
"Avocado",
"Banana",
"Blackberry",
"Blueberry",
"Cherry",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Pear",
"Pineapple",
"Strawberry",
]
function Example() {
const log = useLog()
return (
)
}
export { Example }
```
Submit Apple, then choose Mango. Choosing it fills the field without submitting. Reset restores Apple.
## Search
Enter with no suggestion highlighted runs the `onSubmit` callback with the text, then allows the surrounding form to submit. Call `preventDefault()` on `details.event` if your handler already performs the search.
Choosing a suggestion normally only fills in the field. Add `submitOnSelect` to search as soon as someone chooses one.
```tsx title="search.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
import { useLog } from "./log"
const recent = ["react hooks", "tailwind grid", "web components", "vue v-model"]
function Example() {
const log = useLog()
return (
)
}
export { Example }
```
Type “kotlin” and press Enter to search. Choose a suggestion to search for that text instead.
## Recent Searches
Pair `emptyItems` with `items` to show one collection while the field is empty and search the full collection once someone types. Add `openOnFocus` to show the recent searches on focus.
```tsx title="recent.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteGroup,
AutocompleteGroupLabel,
AutocompleteInput,
AutocompleteItem,
AutocompleteItemText,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const recent = ["react hooks", "tailwind grid", "web components", "vue v-model"]
const topics = [
...recent,
"react server components",
"tailwind colors",
"vue router",
]
const recentSearches = [
{ type: "group" as const, label: "Recent searches", items: recent },
]
function Example() {
return (
change.type === "results"
? `${change.count} ${change.count === 1 ? "topic" : "topics"}`
: null
}
>
No topics found.
{(state) => (
{(entry) =>
typeof entry === "string" ? (
) : (
{entry.label}
{(topic) => (
)}
)
}
)}
)
}
export { Example }
```
Focus the empty field to see Recent searches. Type “react” to search all topics, then clear the text to return to recent searches.
## Async Suggestions
Use [async options](/docs/solid/utilities/async-options) to wait for typing to pause and discard stale results. Pass its `items` and `status`, set `filter` to `false`, and send text changes to its `setQuery()` method.
`AutocompleteStatus` and `AutocompleteEmpty` provide loading, error, and empty messages. Without a status part, `announcement` controls what screen readers hear when typing pauses. `onLoadMore` can request another page when scrolling or highlighting reaches the last suggestion.
```tsx title="async.tsx"
import { useAsyncOptions } from "@ui-sdk/solid/async-options"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
AutocompleteStatus,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
function searchCities(query: string, { signal }: { signal: AbortSignal }) {
const cities = [
"Amsterdam",
"Athens",
"Barcelona",
"Berlin",
"Boston",
"Brussels",
"Buenos Aires",
"Cairo",
"Chicago",
"Copenhagen",
"Dublin",
"Lisbon",
"London",
"Los Angeles",
"Madrid",
"Paris",
"Prague",
"Rome",
"Seoul",
"Tokyo",
]
return new Promise((resolve, reject) => {
const timer = setTimeout(() => {
const needle = query.trim().toLowerCase()
resolve(cities.filter((city) => city.toLowerCase().startsWith(needle)))
}, 300)
signal.addEventListener("abort", () => {
clearTimeout(timer)
reject(new DOMException("Aborted", "AbortError"))
})
})
}
function Example() {
const results = useAsyncOptions(searchCities, { debounce: 200 })
return (
results.setQuery(value)}
onLoadMore={results.loadMore}
>
City
{(state) =>
state.loading
? "Searching…"
: state.count
? `${state.count} ${state.count === 1 ? "city" : "cities"}`
: ""
}
{(state) =>
state.empty && !state.loading
? `No cities start with “${state.query}”.`
: null
}
{(state) => (
{(city) => (
{city}
)}
)}
)
}
export { Example }
```
Type “b” and wait for the city suggestions. Keep typing to replace the search; the status describes the latest results.
## Custom Rendering
Use `render` to give a suggestion a different element. Here each suggestion is a link, so the autocomplete works as a jump-to menu: Enter or a click follows the highlighted link, and the text after the title is a hint that doesn't affect filtering. [Parts and Composition](/docs/solid/parts-and-composition) covers the render API.
```tsx title="custom-rendering.tsx"
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteLabel,
AutocompleteList,
} from "@ui-sdk/solid/autocomplete"
import { For } from "solid-js"
const pages = [
{ title: "Installation", section: "Get Started", href: "#installation" },
{ title: "Composition", section: "Concepts", href: "#composition" },
{ title: "Build Your Own", section: "Concepts", href: "#build-your-own" },
{ title: "Styling", section: "Guides", href: "#styling" },
{ title: "API Reference", section: "Reference", href: "#api-reference" },
{ title: "Accessibility", section: "Reference", href: "#accessibility" },
]
function Example() {
return (
Jump to
No sections found.
{(page) => (
}
>
{page.title}
{page.section}
)}
)
}
export { Example }
```
Type “sty” and press Enter to jump to the Styling section of this page.
## Styling
Each part has a `data-slot`, such as `autocomplete-content`, and shows its state through the attributes listed under [Data Attributes](#data-attributes).
The popup exposes sizing and animation variables. `--anchor-width` is the input’s width; use `--available-height` on the content to keep a long list in the viewport.
While focus stays in the input, use the content’s `data-modality="keyboard"` with an item’s `data-highlighted` to show a keyboard focus indicator on the highlighted suggestion.
### AutocompleteContent
- `--anchor-width`: Width of the anchor, usually the trigger. Use it to match widths.
- `--anchor-height`: Height of the anchor.
- `--available-width`: Space beside the popup, up to the viewport edge. Not inherited either.
- `--available-height`: Space between the anchor and the viewport edge. Use it for max-height. Not inherited, so a child that needs it copies it on the popup, like `[--list-height:var(--available-height)]`, and reads `max-h-(--list-height)`. The first popup registers both names for the whole page with `CSS.registerProperty`, so they don't inherit anywhere. A page that needs them to inherit calls it first, with `inherits: true`. An `@property` rule can't, since a registration in script wins.
- `--transform-origin`: The point on the anchor the popup opens from. Use it to scale from the right place.
- `--arrow-offset`: Where the anchor's center falls along the popup's edge, kept `arrowPadding` from the corners. Position a ::before arrow with it.
- `--drawer-progress`: While it presents as a sheet: how far open the sheet is, from 0 closed to 1 at its largest snap point. Never past 1.
- `--drawer-dim`: While it presents as a sheet: how dim the page behind is, from 0 to 1. The backdrop's opacity follows it.
- `--drawer-expand`: While it presents as a sheet: 0 at the second-largest snap point and below, 1 at the largest. With one snap point, the whole travel.
- `--drawer-stack`: While it presents as a sheet: how many sheets opened from inside this one are open above it, rising smoothly as each one opens. Push it back with it.
- `--sheet-backdrop`: Set it yourself: the color the page dims to while it presents as a sheet. Black at 0.2 by default.
### Viewport
- `--keyboard-inset`: While it presents as a sheet: how many pixels of the page the on-screen keyboard covers, 0 without one.
- `--visual-viewport-width`: While it presents as a sheet: the width of the part of the page you can see.
- `--visual-viewport-height`: While it presents as a sheet: the height of the part of the page you can see, above the keyboard.
- `--visual-viewport-top`: While it presents as a sheet: how far the part of the page you can see is scrolled from the top of the layout, as when the keyboard pushes it up.
## Data Attributes
### AutocompleteLabel
`[data-slot="autocomplete-label"]`
- `data-disabled`: Present when the field is disabled, by its own prop, a field or a `