TokenInput

View Source

Allow users to add and delete multiple items, optionally using autocompletion as they type to find each item when paired with Combobox.Popover.

apple

pears

oranges

bananas

kiwis

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 />)

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 />)

Favorite Countries

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 />)

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 />)

Props

Accepts WrapView props.

onChange

(event: {
  added: boolean
  token: T
  tokenIndex: number
  tokens: T[]
}) => void

Callback when a token has been added or removed.

renderInput

(
  inputProps: object,
  options: {
    addToken: (token: T) => void
    clearInputValue: () => void
    removeToken: (token: T, focusIndex?: number) => void
    selectFirstToken: () => void
    selectLastToken: () => void
  }
) => React.ReactElement

Control how the internal input is rendered, inputProps must be passed through to the rendered input.

renderToken

(
  token: T,
  options: {
    keyboardControls: {
      onKeyDown: (e: React.KeyboardEvent) => void
      tabIndex: number
    }
    removeToken: (token: T, focusIndex?: number) => void
    selectFirstToken: () => void
    selectLastToken: () => void
    selectNextToken: () => void
    selectPreviousToken: () => void
    tokenIndex: number
  }
) => React.ReactElement

Control how a token is rendered. As long as this function returns a string, it will use a default badge, otherwise pass any custom component and functionality you need.

sizestring

tokensArray

Controlled set of tokens.

Props

PreviousTimeField NextPage