---
title: TokenInput
category: Forms
summary: Allow users to add and delete multiple items, optionally using autocompletion as they type to find each item when paired with [`Combobox.Popover`](/combobox/#comboboxpopover).
---

```jsx live
function App() {
  const [foods, setFoods] = React.useState([
    'apple',
    'pears',
    'oranges',
    'bananas',
    'kiwis',
  ])
  return (
    <TokenInput
      maxWidth={80}
      tokens={foods}
      onChange={(event) => setFoods(event.tokens)}
    />
  )
}
render(<App />)
```

```jsx live
function App() {
  const countries = useCountries()
  const [selectedCountries, setSelectedCountries] = React.useState([])
  const fieldRef = React.useRef(null)
  return (
    <Field
      label="Favorite Countries"
      helpContent="Start typing any of your favorite countries you have visited so far."
      innerRef={fieldRef}
    >
      <TokenInput
        naked
        tokens={selectedCountries}
        onChange={({ tokens, token, added }) => {
          console.log({ tokens, token, added })
          setSelectedCountries(added ? [...selectedCountries, token] : tokens)
        }}
        renderToken={(country, { keyboardControls, removeToken }) => (
          <TokenInput.Token
            title={country.name.common}
            renderLeft={country.flag}
            keyboardControls={keyboardControls}
            removeToken={removeToken}
          />
        )}
        renderInput={(inputProps, { clearInputValue }) => (
          <Combobox.Popover
            openOnFocus
            secondaryStroke={false}
            relativeTo={fieldRef}
            placeholder="Add country..."
            onSelect={(token) => {
              console.log({ token })
              setSelectedCountries([...selectedCountries, token])
            }}
            {...inputProps}
          >
            <Combobox.Items
              value={inputProps.value}
              filter={{ keys: ['name.common'] }}
              items={countries.filter(
                (country) =>
                  !selectedCountries.some(
                    (selectedCountry) =>
                      selectedCountry.name.common === country.name.common
                  )
              )}
              renderItem={(country, index) => (
                <Combobox.Item
                  key={country.name.common}
                  value={country}
                  index={index}
                >
                  <Text marginRight={1}>{country.flag}</Text>
                  {country.name.common}
                </Combobox.Item>
              )}
              renderEmpty={
                <Box padding={1}>
                  No results for{' '}
                  <Text as="strong" inline weight={700}>
                    "{inputProps.value}"
                  </Text>
                </Box>
              }
            />
          </Combobox.Popover>
        )}
      />
    </Field>
  )
}

render(<App />)
```