Components

Token Input

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

NameTypeDefaultDescriptionRequired?
idstring
ID of the form element, should match the "for" value of the associated label
namestring
iconNameEnumIconNames
delimiters
string
Array of delimiter key names
valuestring
Current input text. Required when controlling the input text
hasFocusboolean
Current focus state. Required when controlling the focus via onFocus and onBlur
activeTokenstring
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
ariaDescribedbystring
Attribute used to associate other elements that describe the Input, like an error
ariaLabelstring
Label used to describe the input if not used with an accompanying visual label
placeholderstring
Placeholder text for when value is undefined or empty
autoFocusboolean
Will autofocus the element when mounted to the DOM
disabledboolean
HTML disabled attribute
isInvalidboolean
Whether or not the current contents of the input are invalid
hasWarningboolean
Whether or not the current contents of the input has any warnings
requiredboolean
HTML required attribute
elemBeforeReact.Node
16x16 element, such as an icon
elemAfterReact.Node
16x16 element, such as an icon
maxLengthnumber
Max input text length
tokenMaxLengthnumber
Max length of the token
inputPropsany
Props to spread onto the underlying input element
innerRef
'input'
Used to get a reference to the underlying element
qaObject
autocompletestring
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}
/>
);
}