Autocomplete

Installation

pnpm dlx shadcn-svelte@latest add https://coss.miel.my/r/autocomplete.json

Usage

<script lang="ts">
  import * as Autocomplete from "$lib/components/ui/autocomplete/index.js";

  const items = [
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "orange", label: "Orange" },
    { value: "grape", label: "Grape" },
  ];
</script>

<Autocomplete.Root {items}>
  <Autocomplete.Input placeholder="Search..." />
  <Autocomplete.Popup>
    <Autocomplete.Empty>No results found.</Autocomplete.Empty>
    <Autocomplete.List>
      {#snippet item(item: (typeof items)[number])}
        <Autocomplete.Item value={item}>{item.label}</Autocomplete.Item>
      {/snippet}
    </Autocomplete.List>
  </Autocomplete.Popup>
</Autocomplete.Root>

API Reference

Autocomplete.Root

The root autocomplete component. Manages the autocomplete state and provides context to child components.

Prop	Type	Description
`items`	`readonly unknown[]`	The array of items to display in the autocomplete
`open`	`boolean`	Controls whether the popup is open
`children`	`Snippet`	Autocomplete content
`...props`	`ComponentProps<typeof Autocomplete.Root>`	All Shards UI Autocomplete props are supported

Autocomplete.Input

The input field component with extended features for size variants and addon support.

Prop	Type	Default	Description
`size`	`"sm" \\| "default" \\| "lg"`	`"default"`	The size variant of the input field
`startAddon`	`Snippet`	-	Content to display at the start of the input, such as an icon
`showTrigger`	`boolean`	`false`	Whether to display a trigger button on the right side of the input
`showClear`	`boolean`	`false`	Whether to display a clear button on the right side of the input when there is a value
`triggerProps`	`AutocompleteTriggerProps`	-	Props forwarded to the internal trigger button, useful for overriding `aria-label`
`clearProps`	`AutocompleteClearProps`	-	Props forwarded to the internal clear button, useful for overriding `aria-label`
`class`	`string`	-	Additional CSS classes to apply to the component
`...props`	`AutocompleteInputProps`	-	All standard autocomplete input attributes are supported

The popup container that displays the autocomplete suggestions.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`portalProps`	`AutocompletePopupProps["portalProps"]`	Props forwarded to the internal portal
`...props`	`AutocompletePopupProps`	All standard autocomplete popup attributes are supported

Autocomplete.List

A scrollable container for autocomplete items. Use the item snippet to render filtered items or groups. Within a group, use Autocomplete.Collection to render its items.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`item`	`Snippet<[Item, number]>`	Renders each filtered item or group; use instead of `children`
`children`	`AutocompleteListProps["children"]`	Static list content
`...props`	`AutocompleteListProps`	All standard autocomplete list attributes are supported

Autocomplete.Item

An individual selectable autocomplete item.

Prop	Type	Description
`value`	`unknown`	The value of the item
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Item content
`...props`	`AutocompleteItemProps`	All standard autocomplete item attributes are supported

Autocomplete.Empty

Displays a message when no results are found.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Empty-state content
`...props`	`AutocompleteEmptyProps`	All standard autocomplete empty attributes are supported

Autocomplete.Group

Groups related autocomplete items together.

Prop	Type	Description
`items`	`readonly unknown[]`	The array of items in this group
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Group content
`...props`	`AutocompleteGroupProps`	All standard autocomplete group attributes are supported

Autocomplete.GroupLabel

Displays a label for an autocomplete group.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Label content
`...props`	`AutocompleteGroupLabelProps`	All standard autocomplete group label attributes are supported

Autocomplete.Collection

Used to wrap items within a group for rendering.

Prop	Type	Description
`children`	`Snippet<[unknown]>`	Renders each filtered item
`...props`	`ComponentProps<typeof Autocomplete.Collection>`	All standard autocomplete collection attributes are supported