Autocomplete

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4
5export const states = [6  { id: "florida", name: "Florida" },7  { id: "delaware", name: "Delaware" },8  { id: "california", name: "California" },9  { id: "texas", name: "Texas" },10  { id: "new-york", name: "New York" },11  { id: "washington", name: "Washington" },12];13export default function Default() {14  return (15    <NativeAutocomplete16      items={states}17      label="States to Visit"18      placeholder="Select states"19      multiple20      chips21      hideClear22    />23  );24}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { NativeAutocomplete, styles } from "./_native";5const items = [1, 2, 3, 4].map((number) => ({ id: `option${number}`, name: `Option ${number}` }));6export function Variants() {7  return (8    <div {...stylex.props(styles.section)}>9      <section {...stylex.props(styles.stack)}>10        <h3>Single Select Variants</h3>11        <NativeAutocomplete items={items} label="Primary variant" variant="primary" />12        <NativeAutocomplete items={items} label="Secondary variant" variant="secondary" />13      </section>14      <section {...stylex.props(styles.stack)}>15        <h3>Multiple Select Variants</h3>16        <NativeAutocomplete17          items={items}18          label="Primary variant"19          variant="primary"20          placeholder="Select multiple"21          multiple22          chips23        />24        <NativeAutocomplete25          items={items}26          label="Secondary variant"27          variant="secondary"28          placeholder="Select multiple"29          multiple30          chips31        />32      </section>33    </div>34  );35}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Surface } from "@lenso/ui";4import { NativeAutocomplete, styles } from "./_native";5import { states } from "./default";6export function FullWidth() {7  return (8    <Surface xstyle={[styles.surface, styles.fullSurface]}>9      <NativeAutocomplete10        items={states}11        label="State"12        variant="secondary"13        fullWidth14        searchLabel="Search states"15      />16    </Surface>17  );18}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4import { states } from "./default";5export function WithDescription() {6  return (7    <NativeAutocomplete8      items={states}9      label="State"10      searchLabel="Search states"11      searchPlaceholder="Search states..."12      description="Select your state of residence"13    />14  );15}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Button } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { NativeAutocomplete, styles, type Option } from "./_native";7import { states } from "./default";8
9const countries = [10  { id: "usa", name: "United States" },11  { id: "canada", name: "Canada" },12  { id: "mexico", name: "Mexico" },13  { id: "uk", name: "United Kingdom" },14  { id: "france", name: "France" },15  { id: "germany", name: "Germany" },16];17export function Required() {18  const [state, setState] = useState<Option | Option[] | null>(null);19  const [country, setCountry] = useState<Option | Option[] | null>(null);20  const [submitted, setSubmitted] = useState(false);21  return (22    <form23      noValidate24      {...stylex.props(styles.stack)}25      onSubmit={(event) => {26        event.preventDefault();27        setSubmitted(true);28        const data = new FormData(event.currentTarget);29        if (data.get("state") && data.get("country")) {30          alert("Form submitted successfully!");31          return;32        }33        const fields =34          event.currentTarget.querySelectorAll<HTMLButtonElement>('button[role="combobox"]');35        const firstInvalid = fields[data.get("state") ? 1 : 0];36        requestAnimationFrame(() => {37          if (firstInvalid?.isConnected) firstInvalid.focus();38        });39      }}40    >41      <NativeAutocomplete42        items={states}43        label="State"44        name="state"45        required46        value={state}47        onValueChange={setState}48        invalid={submitted && !state}49        error={submitted && !state ? "Please select a state." : undefined}50        searchLabel="Search states"51      />52      <NativeAutocomplete53        items={countries}54        label="Country"55        name="country"56        required57        value={country}58        onValueChange={setCountry}59        invalid={submitted && !country}60        error={submitted && !country ? "Please select a country." : undefined}61        placeholder="Select a country"62        searchLabel="Search countries"63      />64      <Button type="submit">Submit</Button>65    </form>66  );67}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { NativeAutocomplete, styles } from "./_native";5import { states } from "./default";6const countries = [7  { id: "argentina", name: "Argentina" },8  { id: "venezuela", name: "Venezuela" },9  { id: "japan", name: "Japan" },10  { id: "france", name: "France" },11  { id: "italy", name: "Italy" },12  { id: "spain", name: "Spain" },13];14export function Disabled() {15  return (16    <div {...stylex.props(styles.stack)}>17      <NativeAutocomplete18        items={states}19        label="State"20        disabled21        defaultValue={states.find((item) => item.id === "california")}22      />23      <NativeAutocomplete24        items={countries}25        label="Countries to Visit"26        placeholder="Select countries"27        disabled28        multiple29        defaultValue={countries.filter((item) =>30          ["argentina", "japan", "france"].includes(item.id),31        )}32      />33    </div>34  );35}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4const animals = [5  { id: "dog", name: "Dog" },6  { id: "cat", name: "Cat", disabled: true },7  { id: "bird", name: "Bird" },8  { id: "kangaroo", name: "Kangaroo", disabled: true },9  { id: "elephant", name: "Elephant" },10  { id: "tiger", name: "Tiger" },11];12export function WithDisabledOptions() {13  return (14    <NativeAutocomplete15      items={animals}16      label="Animal"17      placeholder="Select an animal"18      searchLabel="Search animals"19      searchPlaceholder="Search animals..."20    />21  );22}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4export function AllowsEmptyCollection() {5  return (6    <NativeAutocomplete7      items={[]}8      label="State"9      searchLabel="Search states"10      searchPlaceholder="Search states..."11    />12  );13}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Autocomplete } from "@lenso/ui";4import { useId, useState } from "react";5import { NativeAutocomplete } from "./_native";6
7const groups = [8  {9    name: "North America",10    items: [11      { id: "usa", name: "United States" },12      { id: "canada", name: "Canada" },13      { id: "mexico", name: "Mexico" },14    ],15  },16  {17    name: "Europe",18    items: [19      { id: "uk", name: "United Kingdom" },20      { id: "france", name: "France" },21      { id: "germany", name: "Germany" },22      { id: "spain", name: "Spain" },23      { id: "italy", name: "Italy" },24    ],25  },26  {27    name: "Asia",28    items: [29      { id: "japan", name: "Japan" },30      { id: "china", name: "China" },31      { id: "india", name: "India" },32      { id: "south-korea", name: "South Korea" },33    ],34  },35];36export function WithSections() {37  const id = useId();38  const { contains } = Autocomplete.useFilter({ sensitivity: "base" });39  const [query, setQuery] = useState("");40  const visibleGroups = groups41    .map((group) => ({42      ...group,43      items: group.items.filter((item) => contains(item.name, query)),44    }))45    .filter((group) => group.items.length);46  return (47    <NativeAutocomplete48      items={groups.flatMap((group) => group.items)}49      filteredItems={visibleGroups.flatMap((group) => group.items)}50      label="Country"51      placeholder="Select a country"52      searchLabel="Search countries"53      searchPlaceholder="Search countries..."54      inputValue={query}55      onInputValueChange={setQuery}56      list={57        <Autocomplete.List>58          {visibleGroups.map((group, index) => (59            <Autocomplete.Group key={group.name} aria-labelledby={`${id}-${index}`}>60              {index > 0 && <Autocomplete.Separator />}61              <Autocomplete.GroupLabel id={`${id}-${index}`}>{group.name}</Autocomplete.GroupLabel>62              {group.items.map((item) => (63                <Autocomplete.Item key={item.id} value={item}>64                  {item.name}65                  <Autocomplete.ItemIndicator />66                </Autocomplete.Item>67              ))}68            </Autocomplete.Group>69          ))}70        </Autocomplete.List>71      }72    />73  );74}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4import { controlledStates } from "./controlled";5export function MultipleSelect() {6  return (7    <NativeAutocomplete8      items={controlledStates}9      label="States"10      placeholder="Select states"11      multiple12      chips13    />14  );15}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { NativeAutocomplete, styles, type Option } from "./_native";6export const controlledStates = [7  { id: "california", name: "California" },8  { id: "texas", name: "Texas" },9  { id: "florida", name: "Florida" },10  { id: "new-york", name: "New York" },11  { id: "illinois", name: "Illinois" },12  { id: "pennsylvania", name: "Pennsylvania" },13];14export function Controlled() {15  const [state, setState] = useState<Option | Option[] | null>(controlledStates[0] ?? null);16  return (17    <div {...stylex.props(styles.stack)}>18      <NativeAutocomplete19        items={controlledStates}20        label="State (controlled)"21        placeholder="Select a state"22        searchLabel="Search states"23        value={state}24        onValueChange={setState}25      />26      <p {...stylex.props(styles.muted)}>27        Selected: {state && !Array.isArray(state) ? state.name : "None"}28      </p>29    </div>30  );31}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { useState } from "react";4import * as stylex from "@stylexjs/stylex";5import { NativeAutocomplete, styles, type Option } from "./_native";6import { controlledStates } from "./controlled";7export function ControlledMultiple() {8  const [selected, setSelected] = useState<Option | Option[] | null>(() =>9    controlledStates.slice(0, 2),10  );11  return (12    <div {...stylex.props(styles.stack)}>13      <NativeAutocomplete14        items={controlledStates}15        label="States"16        placeholder="Select states"17        multiple18        value={selected}19        onValueChange={setSelected}20        searchLabel="Search states"21      />22      <p {...stylex.props(styles.muted)}>23        Selected:{" "}24        {Array.isArray(selected) && selected.length25          ? selected.map((item) => item.id).join(", ")26          : "None"}27      </p>28    </div>29  );30}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Button } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { NativeAutocomplete, styles } from "./_native";7import { states } from "./default";8export function ControlledOpenState() {9  const [open, setOpen] = useState(false);10  return (11    <div {...stylex.props(styles.stack)}>12      <NativeAutocomplete13        items={states}14        label="State"15        searchLabel="Search states"16        open={open}17        onOpenChange={setOpen}18      />19      <Button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"} Autocomplete</Button>20      <p {...stylex.props(styles.muted)}>Autocomplete is {open ? "open" : "closed"}</p>21    </div>22  );23}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { useEffect, useState } from "react";4import { NativeAutocomplete, type Option } from "./_native";5
6interface ResponseData {7  results: { name: string }[];8}9export function AsynchronousFiltering() {10  const [query, setQuery] = useState("");11  const [result, setResult] = useState<{ query: string; items: Option[]; error?: string } | null>(12    null,13  );14  useEffect(() => {15    const controller = new AbortController();16    const load = async () => {17      try {18        const response = await fetch(19          `https://swapi.py4e.com/api/people/?search=${encodeURIComponent(query)}`,20          { signal: controller.signal },21        );22        if (!response.ok) throw new Error("Could not load characters");23        const data = (await response.json()) as ResponseData;24        if (!controller.signal.aborted)25          setResult({26            query,27            items: data.results.map((item) => ({ id: item.name, name: item.name })),28          });29      } catch (error) {30        if (!controller.signal.aborted)31          setResult({32            query,33            items: [],34            error: error instanceof Error ? error.message : "Could not load characters",35          });36      }37    };38    void load();39    return () => controller.abort();40  }, [query]);41  const loading = result?.query !== query;42  return (43    <NativeAutocomplete44      items={result?.items ?? []}45      filteredItems={loading ? [] : (result?.items ?? [])}46      label="Search a Star Wars characters"47      placeholder="Search..."48      searchLabel="Search characters"49      searchPlaceholder="Search characters..."50      inputValue={query}51      onInputValueChange={setQuery}52      loading={loading}53      emptyText={result?.error || "No results found"}54    />55  );56}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { ChevronsExpandVertical } from "@gravity-ui/icons";4import { NativeAutocomplete } from "./_native";5import { states } from "./default";6export function CustomIndicator() {7  return (8    <NativeAutocomplete9      items={states}10      label="State"11      searchLabel="Search states"12      indicator={<ChevronsExpandVertical width={12} height={12} />}13    />14  );15}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { NativeAutocomplete, styles } from "./_native";5
6const currencies = [7  { code: "USD", id: "usd", name: "US Dollar", symbol: "$" },8  { code: "EUR", id: "eur", name: "Euro", symbol: "€" },9  { code: "GBP", id: "gbp", name: "British Pound", symbol: "£" },10  { code: "JPY", id: "jpy", name: "Japanese Yen", symbol: "¥" },11  { code: "CHF", id: "chf", name: "Swiss Franc", symbol: "₣" },12].map((currency) => ({ ...currency, searchText: `${currency.code} ${currency.name}` }));13export function CustomValue() {14  return (15    <NativeAutocomplete16      items={currencies}17      label="Currency"18      placeholder="Select a currency"19      hideClear20      defaultValue={currencies[0]}21      searchLabel="Search currencies"22      searchPlaceholder="Search currencies..."23      renderItem={(item) => {24        const currency = currencies.find((entry) => entry.id === item.id);25        return (26          <span {...stylex.props(styles.details)}>27            <span>{currency?.code}</span>28            <span {...stylex.props(styles.muted)}>{item.name}</span>29          </span>30        );31      }}32      renderValue={(item) => {33        const currency = currencies.find((entry) => entry.id === item.id);34        return currency ? (35          <span {...stylex.props(styles.row)}>36            <strong>{currency.symbol}</strong>37            <span>{currency.code}</span>38            <span {...stylex.props(styles.muted)}>{currency.name}</span>39          </span>40        ) : (41          item.name42        );43      }}44    />45  );46}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Surface } from "@lenso/ui";4import { NativeAutocomplete, styles } from "./_native";5import { states } from "./default";6export function OnSurface() {7  return (8    <Surface xstyle={styles.surface}>9      <NativeAutocomplete10        items={states}11        label="State"12        variant="secondary"13        fullWidth14        searchLabel="Search states"15      />16    </Surface>17  );18}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Autocomplete } from "@lenso/ui";4import { useRef, useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { NativeAutocomplete, OptionContent, type Option } from "./_native";7
8const firstNames = [9  "Emma",10  "Liam",11  "Olivia",12  "Noah",13  "Ava",14  "James",15  "Sophia",16  "Oliver",17  "Isabella",18  "Lucas",19  "Mia",20  "Ethan",21  "Charlotte",22  "Mason",23  "Amelia",24  "Logan",25  "Harper",26  "Alexander",27  "Ella",28  "Benjamin",29];30const lastNames = [31  "Smith",32  "Johnson",33  "Williams",34  "Brown",35  "Jones",36  "Garcia",37  "Miller",38  "Davis",39  "Rodriguez",40  "Martinez",41  "Anderson",42  "Taylor",43  "Thomas",44  "Jackson",45  "White",46  "Harris",47  "Clark",48  "Lewis",49  "Robinson",50  "Walker",51];52const allUsers: Option[] = Array.from({ length: 1000 }, (_, index) => {53  const first = firstNames[index % firstNames.length] ?? "";54  const last = lastNames[Math.floor(index / firstNames.length) % lastNames.length] ?? "";55  return {56    id: String(index + 1),57    name: `${first} ${last}`,58    email: `${first.toLowerCase()}.${last.toLowerCase()}@acme.com`,59  };60});61const virtualStyles = stylex.create({62  field: { width: 300 },63  list: { height: 300, overflowY: "auto", position: "relative", padding: 0 },64  row: { height: 50, boxSizing: "border-box" },65  spacer: (height: number) => ({ height }),66});67export function Virtualization() {68  const { contains } = Autocomplete.useFilter({ sensitivity: "base" });69  const [query, setQuery] = useState("");70  const [scrollTop, setScrollTop] = useState(0);71  const listRef = useRef<HTMLDivElement>(null);72  const filtered = allUsers.filter(73    (user) => contains(user.name, query) || contains(user.email ?? "", query),74  );75  const start = Math.max(0, Math.floor(scrollTop / 50) - 3);76  const end = Math.min(filtered.length, start + 14);77  const onHighlight = (item: Option | undefined) => {78    const index = filtered.findIndex((user) => user.id === item?.id);79    const element = listRef.current;80    if (index < 0 || !element) return;81    const top = index * 50;82    if (top < element.scrollTop) element.scrollTop = top;83    else if (top + 50 > element.scrollTop + 300) element.scrollTop = top - 250;84    setScrollTop(element.scrollTop);85  };86  return (87    <NativeAutocomplete88      items={allUsers}89      xstyle={virtualStyles.field}90      filteredItems={filtered}91      virtualized92      onItemHighlighted={onHighlight}93      label="User"94      placeholder="Select a user"95      searchLabel="Search users"96      searchPlaceholder="Search users..."97      inputValue={query}98      onInputValueChange={(next) => {99        setQuery(next);100        setScrollTop(0);101        if (listRef.current) listRef.current.scrollTop = 0;102      }}103      list={104        <Autocomplete.List105          ref={listRef}106          xstyle={virtualStyles.list}107          onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}108        >109          <div aria-hidden="true" {...stylex.props(virtualStyles.spacer(start * 50))} />110          {filtered.slice(start, end).map((item, offset) => (111            <Autocomplete.Item112              key={item.id}113              value={item}114              index={start + offset}115              aria-setsize={filtered.length}116              aria-posinset={start + offset + 1}117              xstyle={virtualStyles.row}118            >119              <OptionContent item={item} />120              <Autocomplete.ItemIndicator />121            </Autocomplete.Item>122          ))}123          <div124            aria-hidden="true"125            {...stylex.props(virtualStyles.spacer((filtered.length - end) * 50))}126          />127        </Autocomplete.List>128      }129    />130  );131}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import * as stylex from "@stylexjs/stylex";4import { NativeAutocomplete, OptionAvatar, styles } from "./_native";5export const users = [6  {7    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg",8    email: "bob@heroui.com",9    fallback: "B",10    id: "1",11    name: "Bob",12  },13  {14    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg",15    email: "fred@heroui.com",16    fallback: "F",17    id: "2",18    name: "Fred",19  },20  {21    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/purple.jpg",22    email: "martha@heroui.com",23    fallback: "M",24    id: "3",25    name: "Martha",26  },27  {28    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/red.jpg",29    email: "john@heroui.com",30    fallback: "J",31    id: "4",32    name: "John",33  },34  {35    avatarUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg",36    email: "jane@heroui.com",37    fallback: "J",38    id: "5",39    name: "Jane",40  },41];42export function UserSelection() {43  return (44    <NativeAutocomplete45      items={users}46      label="User"47      placeholder="Select a user"48      searchLabel="Search users"49      searchPlaceholder="Search users..."50      renderValue={(item) => (51        <span {...stylex.props(styles.row)}>52          <OptionAvatar item={item} small />53          {item.name}54        </span>55      )}56    />57  );58}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4import { users } from "./user-selection";5export function UserSelectionMultiple() {6  return (7    <NativeAutocomplete8      items={users}9      label="Users"10      placeholder="Select your teammates"11      multiple12      chips13      searchLabel="Search users"14      searchPlaceholder="Search users..."15    />16  );17}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Autocomplete } from "@lenso/ui";4import { useEffect, useState } from "react";5import { NativeAutocomplete } from "./_native";6
7const cities = [8  { country: "USA", name: "New York" },9  { country: "USA", name: "Los Angeles" },10  { country: "USA", name: "Chicago" },11  { country: "UK", name: "London" },12  { country: "France", name: "Paris" },13  { country: "Japan", name: "Tokyo" },14  { country: "Australia", name: "Sydney" },15  { country: "Canada", name: "Toronto" },16  { country: "Germany", name: "Berlin" },17  { country: "Spain", name: "Madrid" },18].map((city) => ({ ...city, id: city.name }));19
20export function LocationSearch() {21  const { contains } = Autocomplete.useFilter({ sensitivity: "base" });22  const [query, setQuery] = useState("");23  const [settledQuery, setSettledQuery] = useState("");24  useEffect(() => {25    const timeout = setTimeout(() => setSettledQuery(query), 300);26    return () => clearTimeout(timeout);27  }, [query]);28  const loading = query !== settledQuery;29  const results = cities.filter((city) => contains(city.name, settledQuery));30  return (31    <NativeAutocomplete32      items={cities}33      label="City"34      placeholder="Search for a city"35      searchLabel="Search cities"36      searchPlaceholder="Search cities..."37      inputValue={query}38      onInputValueChange={setQuery}39      filteredItems={loading ? [] : results}40      loading={loading}41      emptyText="No cities found"42    />43  );44}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4const tags = [5  { id: "react", name: "React" },6  { id: "typescript", name: "TypeScript" },7  { id: "javascript", name: "JavaScript" },8  { id: "nodejs", name: "Node.js" },9  { id: "python", name: "Python" },10  { id: "vue", name: "Vue" },11  { id: "angular", name: "Angular" },12  { id: "nextjs", name: "Next.js" },13];14export function TagGroupSelection() {15  return (16    <NativeAutocomplete17      items={tags}18      label="Tags"19      placeholder="Select tags"20      multiple21      chips22      searchLabel="Search tags"23      searchPlaceholder="Search tags..."24      emptyText="No tags found"25    />26  );27}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4const emails = [5  { email: "alice@example.com", id: "alice@example.com", name: "Alice Johnson" },6  { email: "bob@example.com", id: "bob@example.com", name: "Bob Smith" },7  { email: "charlie@example.com", id: "charlie@example.com", name: "Charlie Brown" },8  { email: "diana@example.com", id: "diana@example.com", name: "Diana Prince" },9  { email: "eve@example.com", id: "eve@example.com", name: "Eve Wilson" },10];11export function EmailRecipients() {12  return (13    <NativeAutocomplete14      items={emails}15      label="To"16      placeholder="Add recipients"17      multiple18      chips19      chipText={(item) => item.email}20      searchLabel="Search emails"21      searchPlaceholder="Search emails..."22      emptyText="No recipients found"23    />24  );25}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { NativeAutocomplete } from "./_native";4const teammates = [5  { id: "sarah", name: "Sarah Chen", role: "Product Design" },6  { id: "marcus", name: "Marcus Lee", role: "Engineering" },7  { id: "priya", name: "Priya Patel", role: "Data Science" },8  { id: "jordan", name: "Jordan Kim", role: "Customer Success" },9  { id: "alex", name: "Alex Rivera", role: "Marketing" },10];11export function CustomStyles() {12  return (13    <NativeAutocomplete14      items={teammates}15      label="Assignees"16      description="People who will be notified when this task updates."17      placeholder="Search teammates..."18      searchLabel="Search by name or role"19      searchPlaceholder="Search by name or role..."20      multiple21      chips22      custom23      emptyText="No teammates found"24    />25  );26}