Token Input

Components

Token Input

Code

A Token Input is a specialized text input that tracks entered values and displays them to the user as tokens.

import { TokenInput } from '@sproutsocial/racine'

({ tokens }) => {
  const [tokenSpecs, setTokenSpecs] = useState(tokens || []);

  return (
      <TokenInput
        id={"representativeExample"}
				ariaLabel='Enter example values to create tokens'
        name={"example"}
        tokens={tokenSpecs}
        onChangeTokens={setTokenSpecs}
      />
  );
}

Properties

Name	Type	Description
`id`	`string`	ID of the form element, should match the "for" value of the associated label
`name`	`string`
`iconName`	`EnumIconNames`
`delimiters`	`string`	Array of delimiter key names
`value`	`string`	Current input text. Required when controlling the input text
`hasFocus`	`boolean`	Current focus state. Required when controlling the focus via onFocus and onBlur
`activeToken`	`string`	Id of the currently selected token
`tokens`	`{ id: string, iconName?: EnumIconNames, value: string, valid?: boolean, ... }`	Array of current tokens
`onChangeTokens`	`(tokens: TypeTokenSpec[]) => void`	Standard control of changing tokens. For fine-grain control use onAddToken and onRemoveToken, instead
`onAddToken`	`(tokenSpec: TypeTokenSpec) => void`	Fine-grained control of adding tokens. Use with onRemoveToken instead of onChangeTokens
`onRemoveToken`	`(tokenId: string) => void`	Fine-grained control of removing tokens. Use with onAddToken instead of onChangeTokens
`onClickToken`	`(e: SyntheticEvent<HTMLButtonElement>, tokenId: string) => void`	Controls clicking on a token. When absent, clicking a token removes itself
`onChange`	`(e: SyntheticInputEvent<HTMLInputElement>, value: string) => void`	Fine-grained control of the input text used to create tokens
`onPaste`	`(e: SyntheticClipboardEvent<HTMLInputElement>, value: string) => void`	Fine-grained control of pasted text
`onBlur`	`(e: SyntheticFocusEvent<HTMLInputElement>) => void`
`onFocus`	`(e: SyntheticFocusEvent<HTMLInputElement>) => void`
`onKeyDown`	`(e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void`
`onKeyUp`	`(e: SyntheticKeyboardEvent<HTMLInputElement>, value: string) => void`
`ariaDescribedby`	`string`	Attribute used to associate other elements that describe the Input, like an error
`ariaLabel`	`string`	Label used to describe the input if not used with an accompanying visual label
`placeholder`	`string`	Placeholder text for when value is undefined or empty
`autoFocus`	`boolean`	Will autofocus the element when mounted to the DOM
`disabled`	`boolean`	HTML disabled attribute
`isInvalid`	`boolean`	Whether or not the current contents of the input are invalid
`hasWarning`	`boolean`	Whether or not the current contents of the input has any warnings
`required`	`boolean`	HTML required attribute
`elemBefore`	`React.Node`	16x16 element, such as an icon
`elemAfter`	`React.Node`	16x16 element, such as an icon
`maxLength`	`number`	Max input text length
`tokenMaxLength`	`number`	Max length of the token
`inputProps`	`any`	Props to spread onto the underlying input element
`innerRef`	`'input'`	Used to get a reference to the underlying element
`qa`	`Object`
`autocomplete`	`string`	Browser autocomplete support

Recipes

Using preexisting tokens

import { TokenInput } from '@sproutsocial/racine'

({ tokens = [{id:"1",value:"hello"}, {id:"2",value:"world"}] }) => {
  const [tokenSpecs, setTokenSpecs] = useState(tokens || []);

  return (
      <TokenInput
        id={"existingTokensExample"}
        name={"example"}
				ariaLabel='Enter example values to create tokens'
        tokens={tokenSpecs}
        onChangeTokens={setTokenSpecs}
      />
  );
}

With icons

import { TokenInput } from '@sproutsocial/racine'

({ tokens = [{id:"1",value:"hello", iconProps:{'aria-label': 'facebook'}}, {id:"2",value:"world", iconProps:{'aria-label': 'facebook'}}] }) => {
  const [tokenSpecs, setTokenSpecs] = useState(tokens || []);

  return (
      <TokenInput
        iconName="facebook"
				iconProps={{'aria-label': 'facebook'}}
        elemBefore={<Icon fixedWidth aria-hidden name="lock-outline" />}
        elemAfter={<Icon fixedWidth aria-hidden name="magnifying-glass-outline" />}
				ariaLabel='Enter values to create tokens'
        id={"iconExample"}
        name={"example"}
        tokens={tokenSpecs}
        onChangeTokens={setTokenSpecs}
      />
  );
}