Tags Input

The TagsInput wrapper component can be used when an input supports combining multiple values in a single form field. The component is a complete form control supporting labels, errors and disabled states.

Install
npm install @pluralsight/ps-design-system-tagsinput
Import
import TagsInput from '@pluralsight/ps-design-system-tagsinput'

Examples

import React from 'react'
import TagsInput, { Option } from '@pluralsight/ps-design-system-tagsinput'

const Comp = () => {
  const [searchTerm, setSearchTerm] = React.useState('')
  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = evt => {
    setSearchTerm(evt.target.value)
  }

  const [value, setValue] = React.useState<Option[]>([
    { label: 'first', value: 'first' },
    { label: 'second', value: 'second' }
  ])

  const handleOnKeyPress: React.KeyboardEventHandler = evt => {
    if (evt.key !== 'Enter') return

    if (evt.target instanceof HTMLInputElement) {
      const { value: targetValue } = evt.target
      if (targetValue.length < 1) return

      const nextOption = { label: targetValue, value: targetValue }
      const nextValue = uniqBy([...value, nextOption], 'value')

      setSearchTerm('')
      setValue(nextValue)
    }
  }

  return (
    <TagsInput
      label="Label area"
      onChange={(_, nextValue) => {
        setValue(nextValue)
      }}
      onKeyPress={handleOnKeyPress}
      onSearchInputChange={handleInputChange}
      searchInputValue={searchTerm}
      value={value}
    />
  )
}

const uniqBy = (arr: any[], key: string) =>
  Array.from(new Set(arr.map(item => item[key]))).map(k =>
    arr.find(i => i[key] === k)
  )

export default Comp

Labels

import React from 'react'
import TagsInput from '@pluralsight/ps-design-system-tagsinput'

const noop = () => {}

const Comp = () => (
  <div className="example-flex-column">
    <TagsInput
      onChange={noop}
      onKeyPress={noop}
      onSearchInputChange={noop}
      placeholder="Enter tags"
      searchInputValue=""
      value={[{ label: 'tag', value: 'tag'}]}
    />

    <TagsInput
      label="Label area"
      onChange={noop}
      onKeyPress={noop}
      onSearchInputChange={noop}
      searchInputValue=""
      subLabel="Hint text displayed here"
      value={[{ label: 'tag', value: 'tag'}]}
    />

    <TagsInput
      label={<TagsInput.Label>ReactNode label</TagsInput.Label>}
      onChange={noop}
      onKeyPress={noop}
      onSearchInputChange={noop}
      searchInputValue=""
      subLabel={<TagsInput.SubLabel>ReactNode sublabel</TagsInput.SubLabel>}
      value={[{ label: 'tag', value: 'tag'}]}
    />
  </div>
)

export default Comp

Prefix/Suffix

import React from 'react'
import { SearchIcon } from '@pluralsight/ps-design-system-icon'
import TagsInput from '@pluralsight/ps-design-system-tagsinput'

const noop = () => {}

const Comp = () => (
  <div className="example-flex-column">
    <TagsInput
      label="Input with prefix"
      onChange={noop}
      onKeyPress={noop}
      onSearchInputChange={noop}
      prefix={<SearchIcon />}
      searchInputValue=""
      value={[]}
    />

    <TagsInput
      label="Input with suffix"
      onChange={noop}
      onKeyPress={noop}
      onSearchInputChange={noop}
      searchInputValue=""
      suffix={<SearchIcon />}
      value={[]}
    />
  </div>
)

export default Comp

Disabled

import React from 'react'
import TagsInput from '@pluralsight/ps-design-system-tagsinput'

const noop = () => {}

const Comp = () => (
  <div className="example-flex-column">
    <TagsInput
      disabled
      label="Disabled input"
      onChange={noop}
      onKeyPress={noop}
      onSearchInputChange={noop}
      searchInputValue=""
      value={[{ label: 'tag', value: 'tag'}]}
    />
  </div>
)

export default Comp

Error

import React from 'react'
import TagsInput from '@pluralsight/ps-design-system-tagsinput'

const noop = () => {}

const Comp = () => (
  <div className="example-flex-column">
    <TagsInput
      error
      label="Error input"
      onChange={noop}
      onKeyPress={noop}
      onSearchInputChange={noop}
      searchInputValue=""
      value={[{ label: 'tag', value: 'tag'}]}
    />
  </div>
)

export default Comp

Advanced customization

The TagsInput component is a convenience wrapper for common usecases. If you need advanced customization, please explore building your own wrapper using the Field and Tag components.

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Combobox, Listbox

Props

Name	Type	Description	Default
`disabled`	`boolean`
`error`	`boolean`
`label`	`string \| ReactNode`	identifying string for input
`onChange` Required	`(evt, nextValue: Option[]) => void`
`onSearchInputChange` Required	`ChangeEventHandler`
`searchInputValue` Required	`string`
`placeholder`	`string`	in-field usage hint
`renderInputTag`	`(props, ref) => ReactNode`	render prop used to replace the default input	`(props, ref) => <input ref={ref} {...props} />`
`subLabel`	`string \| ReactNode`
`value` Required	`Option[]`