Автозаполнение

import { Autocomplete } from 'twenty-ui/primitives/input';

const FRUITS = ['Apple', 'Banana', 'Cherry'];

export const FruitInput = () => (
  <Autocomplete.Root items={FRUITS} autoHighlight="always">
    <Autocomplete.InputGroup>
      <Autocomplete.Input aria-label="Fruit" placeholder="Search fruits" />
    </Autocomplete.InputGroup>
    <Autocomplete.Portal>
      <Autocomplete.Positioner>
        <Autocomplete.Popup>
          <Autocomplete.Empty>No fruits found</Autocomplete.Empty>
          <Autocomplete.List>
            {(fruit: string) => (
              <Autocomplete.Item key={fruit} value={fruit}>
                {fruit}
              </Autocomplete.Item>
            )}
          </Autocomplete.List>
        </Autocomplete.Popup>
      </Autocomplete.Positioner>
    </Autocomplete.Portal>
  </Autocomplete.Root>
);

Autocomplete.Root
├── Autocomplete.InputGroup (optional)
│   ├── Autocomplete.Input
│   ├── Autocomplete.Clear (optional)
│   └── Autocomplete.Trigger (optional)
│       └── Autocomplete.Icon (optional)
├── Autocomplete.Portal
│   ├── Autocomplete.Backdrop (optional)
│   └── Autocomplete.Positioner
│       └── Autocomplete.Popup
│           ├── Autocomplete.Arrow (optional)
│           ├── Autocomplete.Empty
│           └── Autocomplete.List
│               ├── Autocomplete.Item
│               ├── Autocomplete.Group (optional)
│               │   ├── Autocomplete.GroupLabel
│               │   └── Autocomplete.Collection
│               │       └── Autocomplete.Item
│               ├── Autocomplete.Row (optional, with Root.grid)
│               │   └── Autocomplete.Item
│               └── Autocomplete.Separator (optional)
├── Autocomplete.Status (optional)
└── Autocomplete.Value (optional)

import { Autocomplete } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

type City = { id: number; name: string; country: string };
type CityGroup = { label: string; items: City[] };

const CITY_GROUPS: CityGroup[] = [
  {
    label: 'Europe',
    items: [
      { id: 1, name: 'Paris', country: 'France' },
      { id: 2, name: 'Lisbon', country: 'Portugal' },
    ],
  },
];

export const GroupedCityInput = () => (
  <Text
    style={{ display: 'grid', alignContent: 'start', gap: 8, width: '100%' }}
  >
    <label htmlFor="grouped-city">
      <Text render={<span />}>City</Text>
    </label>
    <Autocomplete.Root
      items={CITY_GROUPS}
      itemToStringValue={(city) => city.name}
      autoHighlight="always"
    >
      <Autocomplete.Input id="grouped-city" placeholder="Search cities" />
      <Autocomplete.Portal>
        <Autocomplete.Positioner>
          <Autocomplete.Popup>
            <Autocomplete.Empty>No matching cities</Autocomplete.Empty>
            <Autocomplete.List>
              {(group: CityGroup) => (
                <Autocomplete.Group key={group.label} items={group.items}>
                  <Autocomplete.GroupLabel>
                    {group.label}
                  </Autocomplete.GroupLabel>
                  <Autocomplete.Collection>
                    {(city: City) => (
                      <Autocomplete.Item
                        key={city.id}
                        value={city}
                        description={city.country}
                      >
                        {city.name}
                      </Autocomplete.Item>
                    )}
                  </Autocomplete.Collection>
                </Autocomplete.Group>
              )}
            </Autocomplete.List>
          </Autocomplete.Popup>
        </Autocomplete.Positioner>
      </Autocomplete.Portal>
    </Autocomplete.Root>
  </Text>
);

import { useState } from 'react';
import { Autocomplete } from 'twenty-ui/primitives/input';

const CITIES = ['Paris', 'London', 'Lisbon'];

export const CityPrefixInput = () => {
  const [value, setValue] = useState('');
  const { startsWith } = Autocomplete.useFilter();
  const filteredItems = CITIES.filter((city) => startsWith(city, value));

  return (
    <Autocomplete.Root
      items={CITIES}
      filteredItems={filteredItems}
      value={value}
      onValueChange={setValue}
      autoHighlight="always"
    >
      <Autocomplete.Input aria-label="City prefix" />
      <Autocomplete.Portal>
        <Autocomplete.Positioner>
          <Autocomplete.Popup>
            <Autocomplete.Empty>No matching cities</Autocomplete.Empty>
            <Autocomplete.List>
              {(city: string) => (
                <Autocomplete.Item key={city} value={city}>
                  {city}
                </Autocomplete.Item>
              )}
            </Autocomplete.List>
          </Autocomplete.Popup>
        </Autocomplete.Positioner>
      </Autocomplete.Portal>
    </Autocomplete.Root>
  );
};