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

Copy

Edit

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

Copy

Edit

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

tokensArray

array | defaults to null Controlled set of tokens.

onChangeFunction

function(event: { added: boolean token: any, tokenIndex: number, tokens: array, }) Callback when a token has been added or removed.

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.

renderInputFunction

function(inputProps: object) Control how the internal input is rendered, inputProps must be passed through to the rendered input.

Props

PreviousTimeField