TextInputWithTokens

TextInputWithTokens is an input for a value that is a list.

Page navigation navigation

Use a TextInputWithTokens for lists where items can be added or removed, but not edited inline. Typically paired with autocomplete for selecting items from a list.

React examples

Default

zero (press backspace or delete to remove)one (press backspace or delete to remove)two (press backspace or delete to remove)three (press backspace or delete to remove)

<TextInputWithTokens
  tokens={[
    {text: 'zero', id: 0},
    {text: 'one', id: 1},
    {text: 'two', id: 2},
    {text: 'three', id: 3},
  ]}
  onTokenRemove={(tokenId: string | number) => {
    alert(`Fake remove token with id: ${tokenId}`)
  }}
/>

<TextInputWithTokens
  tokens={[
    {text: 'zero', id: 0},
    {text: 'one', id: 1},
    {text: 'two', id: 2},
    {text: 'three', id: 3},
  ]}
  onTokenRemove={(tokenId: string | number) => {
    alert(`Fake remove token with id: ${tokenId}`)
  }}
/>

Prevent wrapping

By default, tokens wrap to multiple lines. You may override this to force tokens or stay on one line in a horizontal scrolling container.

zero (press backspace or delete to remove)one (press backspace or delete to remove)two (press backspace or delete to remove)three (press backspace or delete to remove)four (press backspace or delete to remove)five (press backspace or delete to remove)six (press backspace or delete to remove)seven (press backspace or delete to remove)eight (press backspace or delete to remove)nine (press backspace or delete to remove)

<Box sx={{maxWidth: '500px'}}>
  {/* Setting max-width to prevent the input from overflowing the example box */}
  <TextInputWithTokens
    preventTokenWrapping
    tokens={[
      {text: 'zero', id: 0},
      {text: 'one', id: 1},
      {text: 'two', id: 2},
      {text: 'three', id: 3},
      {text: 'four', id: 4},
      {text: 'five', id: 5},
      {text: 'six', id: 6},
      {text: 'seven', id: 7},
      {text: 'eight', id: 8},
      {text: 'nine', id: 9},
    ]}
    onTokenRemove={(tokenId: string | number) => {
      alert(`Fake remove token with id: ${tokenId}`)
    }}
    block // `block` only needed to fill parent width without overflowing
  />
</Box>

<Box sx={{maxWidth: '500px'}}>
  {/* Setting max-width to prevent the input from overflowing the example box */}
  <TextInputWithTokens
    preventTokenWrapping
    tokens={[
      {text: 'zero', id: 0},
      {text: 'one', id: 1},
      {text: 'two', id: 2},
      {text: 'three', id: 3},
      {text: 'four', id: 4},
      {text: 'five', id: 5},
      {text: 'six', id: 6},
      {text: 'seven', id: 7},
      {text: 'eight', id: 8},
      {text: 'nine', id: 9},
    ]}
    onTokenRemove={(tokenId: string | number) => {
      alert(`Fake remove token with id: ${tokenId}`)
    }}
    block // `block` only needed to fill parent width without overflowing
  />
</Box>

With a max height

When wrapping, set a max height; exceeding rows will scroll vertically.

<Box sx={{maxWidth: '300px'}}>
  {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}
  <TextInputWithTokens
    tokens={[
      {text: 'zero', id: 0},
      {text: 'one', id: 1},
      {text: 'two', id: 2},
      {text: 'three', id: 3},
      {text: 'four', id: 4},
      {text: 'five', id: 5},
      {text: 'six', id: 6},
      {text: 'seven', id: 7},
      {text: 'eight', id: 8},
      {text: 'nine', id: 9},
    ]}
    onTokenRemove={(tokenId: string | number) => {
      alert(`Fake remove token with id: ${tokenId}`)
    }}
    maxHeight={100}
    block // `block` only needed to fill parent width without overflowing
  />
</Box>

<Box sx={{maxWidth: '300px'}}>
  {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}
  <TextInputWithTokens
    tokens={[
      {text: 'zero', id: 0},
      {text: 'one', id: 1},
      {text: 'two', id: 2},
      {text: 'three', id: 3},
      {text: 'four', id: 4},
      {text: 'five', id: 5},
      {text: 'six', id: 6},
      {text: 'seven', id: 7},
      {text: 'eight', id: 8},
      {text: 'nine', id: 9},
    ]}
    onTokenRemove={(tokenId: string | number) => {
      alert(`Fake remove token with id: ${tokenId}`)
    }}
    maxHeight={100}
    block // `block` only needed to fill parent width without overflowing
  />
</Box>

Truncated token list

You may choose to limit the number of tokens that are visible. However, all tokens will be visible while the text input is focused.

<TextInputWithTokens
  visibleTokenCount={5}
  tokens={[
    {text: 'zero', id: 0},
    {text: 'one', id: 1},
    {text: 'two', id: 2},
    {text: 'three', id: 3},
    {text: 'four', id: 4},
    {text: 'five', id: 5},
    {text: 'six', id: 6},
    {text: 'seven', id: 7},
    {text: 'eight', id: 8},
    {text: 'nine', id: 9},
  ]}
  onTokenRemove={(tokenId: string | number) => {
    alert(`Fake remove token with id: ${tokenId}`)
  }}
/>

<TextInputWithTokens
  visibleTokenCount={5}
  tokens={[
    {text: 'zero', id: 0},
    {text: 'one', id: 1},
    {text: 'two', id: 2},
    {text: 'three', id: 3},
    {text: 'four', id: 4},
    {text: 'five', id: 5},
    {text: 'six', id: 6},
    {text: 'seven', id: 7},
    {text: 'eight', id: 8},
    {text: 'nine', id: 9},
  ]}
  onTokenRemove={(tokenId: string | number) => {
    alert(`Fake remove token with id: ${tokenId}`)
  }}
/>

Props

Loading data for text_input_with_tokens...