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.

onChangeFunction

function(event: {
 added: boolean
 token: any,
 tokenIndex: number,
 tokens: array,
})

Callback when a token has been added or removed.

renderInputFunction

function(inputProps: object)

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

renderTokenFunction

function(token: any, {
 removeToken: func,
 selectFirstToken: func,
 selectLastToken: func,
 selectNextToken: func,
 selectPreviousToken: func,
 tokenIndex: number
})

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

array | defaults to null Controlled set of tokens.

Props

PreviousTimeField NextTabNav