Fanvue API Documentation

import { Autocomplete } from "@fanvue/ui";
import type {
  AutocompleteGroup,
  AutocompleteOption,
  AutocompleteProps,
  AutocompleteSize,
} from "@fanvue/ui";

Examples

Default

import { Autocomplete } from "@fanvue/ui";
import type { AutocompleteOption } from "@fanvue/ui";

const COUNTRIES: AutocompleteOption[] = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "jp", label: "Japan" },
  { value: "br", label: "Brazil" },
];

<Autocomplete
  label="Country"
  placeholder="Search countries..."
  helperText="Start typing to filter"
  options={COUNTRIES}
  emptyText="No results"
/>

Error State

import { Autocomplete } from "@fanvue/ui";
import type { AutocompleteOption } from "@fanvue/ui";

const COUNTRIES: AutocompleteOption[] = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "jp", label: "Japan" },
  { value: "br", label: "Brazil" },
];

<Autocomplete
  label="Country"
  placeholder="Search countries..."
  options={COUNTRIES}
  error
  errorMessage="This field is required"
  emptyText="No results"
/>

Sizes

import { Autocomplete } from "@fanvue/ui";
import type { AutocompleteOption } from "@fanvue/ui";

const COUNTRIES: AutocompleteOption[] = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "jp", label: "Japan" },
  { value: "br", label: "Brazil" },
];

<div className="flex w-[375px] flex-col gap-4">
  <Autocomplete
    size="48"
    label="Size 48"
    placeholder="Search..."
    options={COUNTRIES}
    emptyText="No results"
  />
  <Autocomplete
    size="40"
    label="Size 40"
    placeholder="Search..."
    options={COUNTRIES}
    emptyText="No results"
  />
  <Autocomplete
    size="32"
    label="Size 32"
    placeholder="Search..."
    options={COUNTRIES}
    emptyText="No results"
  />
</div>

Multi Select

import { Autocomplete } from "@fanvue/ui";
import type { AutocompleteOption } from "@fanvue/ui";

const FRUITS: AutocompleteOption[] = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "cherry", label: "Cherry" },
  { value: "date", label: "Date" },
  { value: "elderberry", label: "Elderberry" },
  { value: "fig", label: "Fig" },
  { value: "grape", label: "Grape" },
];

<Autocomplete
  label="Fruits"
  placeholder="Select fruits..."
  options={FRUITS}
  multiple
  defaultValue={["apple", "cherry"]}
  emptyText="No results"
/>

Clearable

import { Autocomplete } from "@fanvue/ui";
import type { AutocompleteOption } from "@fanvue/ui";

const COUNTRIES: AutocompleteOption[] = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
  { value: "au", label: "Australia" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "jp", label: "Japan" },
  { value: "br", label: "Brazil" },
];

<Autocomplete
  label="Country"
  placeholder="Search countries..."
  options={COUNTRIES}
  clearable
  clearAriaLabel="Clear selection"
  defaultValue="us"
  emptyText="No results"
/>

Props

Autocomplete

A combobox input with single- or multi-select, optional async loading, and native support for grouped + pinned options.

Pass groups plus an options array whose entries reference each group via groupId to render hierarchical lists with proper role="group" + aria-labelledby semantics. Options without a groupId render above the first group; options marked pinned render above everything and bypass the search filter.
Indentation of nested rows (e.g. price under product) is controlled by the consumer via renderOption styling — there is no built-in indent.

AutocompleteOption[]

required

string

boolean

default:"false"

string

boolean

default:"false"

((inputValue: string) => string)

boolean

string | string[] | null

boolean

default:"false"

string

boolean

default:"false"

string

((option: AutocompleteOption, query: string) => boolean)

boolean

default:"false"

AutocompleteGroup[]

Ordered list of groups. When provided, options whose groupId matches an entry render under the corresponding heading. Groups with no visible (post-filter) options collapse silently. Pinned options render above everything; ungrouped options render between pinned and the first group. Only one level of grouping is supported.

string

ReactNode

boolean

default:"false"

string

boolean

((value: string | null) => void) | ((values: string[]) => void)

((inputValue: string) => void)

((value: string) => void)

((open: boolean) => void)

boolean

string

((group: AutocompleteGroup) => ReactNode)

Custom renderer for group headings. The returned node is wrapped by the component in an element carrying the id referenced by the surrounding role="group" wrapper’s aria-labelledby, so consumers only need to return visual content.

((option: AutocompleteOption, state: { selected: boolean; active: boolean; }) => React ...

Full type: ((option: AutocompleteOption, state: { selected: boolean; active: boolean; }) => ReactNode).

((option: AutocompleteOption, onRemove: () => void) => ReactNode)

"32" | "40" | "48"

default:"48"

string | string[] | null

Exported types

Also exported from @fanvue/ui: AutocompleteGroup, AutocompleteOption, AutocompleteProps, AutocompleteSize.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

Autocomplete

Examples

Default

Error State

Sizes

Multi Select

Clearable

Props

Autocomplete

Exported types

​Examples

​Default

​Error State

​Sizes

​Multi Select

​Clearable

​Props

​Autocomplete

​Exported types

Examples

Default

Error State

Sizes

Multi Select

Clearable

Props

Autocomplete

Exported types