```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState('');
<>
  <h5>Value: {value || 'No value'}</h5>
  <SilkeTextField name="test" label="Text before" />
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeBox key={kind} gap="s">
      <SilkeAutocompleteField
        label={kind}
        kind={kind}
        name="Foobar"
        placeholder="Placeholder"
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeAutocompleteField
        label={kind}
        kind={kind}
        size="s"
        name="Foobar"
        placeholder="Placeholder"
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeBox>
  ))}
  <SilkeTextField name="test" label="Text after" />
</>;
```

## Items with subLabels and icons

```js
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  subLabel: ipsum.name(),
  icon: 'variable.color',
}));
const [value, setValue] = React.useState('');
<>
  <h5>Value: {value || 'No value'}</h5>
  <SilkeTextField name="test" label="Text before" />
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeBox key={kind} gap="s">
      <SilkeAutocompleteField
        label={kind}
        kind={kind}
        name="Foobar"
        placeholder="Placeholder"
        onChange={setValue}
        value={value}
        items={items}
      />
      <SilkeAutocompleteField
        label={kind}
        kind={kind}
        size="s"
        name="Foobar"
        placeholder="Placeholder"
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeBox>
  ))}
  <SilkeTextField name="test" label="Text after" />
</>;
```

## Autocomplete multiple

```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState([]);
<>
  <h5>Value: {value.join(', ') || 'No value'}</h5>
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeAutocompleteField
      key={kind}
      label={kind}
      kind={kind}
      placeholder="Select multiple"
      name="Foobar"
      multiple
      onChange={setValue}
      value={value}
      items={items}
    />
  ))}
</>;
```

## Autocomplete add new items

```js
const itemsArray = ['Banana', 'Apple', 'Carrot', 'Chips'];
const [items, setitems] = React.useState(() =>
  itemsArray.map((i) => ({ value: i.toLowerCase(), label: i })),
);
const [value, setValue] = React.useState([]);

<SilkeAutocompleteField
  label="Default"
  name="Foobar"
  placeholder="Write text to add new items"
  multiple
  onChange={setValue}
  value={value}
  items={items}
  onAdd={(label) => {
    setitems([...items, { value: label, label }]);
    setValue([...value, label]);
  }}
/>;
```

## Show all selected options

```js
const values = ipsum.list(30, () => ipsum.name(1).toLowerCase());
const items = values.map((i) => ({ value: i.toLowerCase(), label: i }));

<SilkeAutocompleteField
  label="Default"
  name="BigList"
  placeholder="Write text to add new items"
  multiple
  value={values}
  items={items}
  onChange={() => undefined}
  showMaxTags={Infinity}
/>;
```

## Autocomplete with icon

```js
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  icon: 'html5',
}));
const [value, setValue] = React.useState('');
<>
  <h5>Value: {value || 'No value'}</h5>
  <SilkeTextField name="test" label="Text before" />
  {['default', 'zombie', 'ghost'].map((kind) => (
    <SilkeBox key={kind} gap="s">
      <SilkeAutocompleteField
        label={kind}
        kind={kind}
        name="Foobar"
        placeholder="Placeholder"
        onChange={setValue}
        value={value}
        items={items}
      />
    </SilkeBox>
  ))}
  <SilkeTextField name="test" label="Text after" />
</>;
```

## Native Popover Version

The native version uses the browser's native Popover API for better performance and accessibility.

```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState('');
<>
  <h5>Value: {value || 'No value'}</h5>
  <SilkeAutocompleteFieldNative
    label="Native Popover"
    name="Foobar"
    placeholder="Placeholder"
    onChange={setValue}
    value={value}
    items={items}
  />
</>;
```

## Native Popover Multiple

```js
const items = ipsum.list((i) => ({ value: i, label: ipsum.name() }));
const [value, setValue] = React.useState([]);
<>
  <h5>Value: {value.join(', ') || 'No value'}</h5>
  <SilkeAutocompleteFieldNative
    label="Native Multiple"
    name="Foobar"
    placeholder="Select multiple"
    multiple
    onChange={setValue}
    value={value}
    items={items}
  />
</>;
```