Tag Input

Usage

import { TagInput } from '@wdzyi/ui';

<TagInput
  label='Project tags'
  value={tags}
  onValueChange={setTags}
  suggestions={['Branding', 'Casino', 'Fintech', 'Motion', 'Product']}
  max={8}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

value, defaultValue, onValueChangestring[], string[], (value: string[]) => void

Hold the tags yourself, or let the field hold them. onValueChange gets all of them whenever one comes or goes.

suggestionsstring[]

What to suggest as you type, in the order to show them. Those that start with what’s typed come before those with a later word that does, and tags already chosen are left out. A sample of kinds of work by default.

maxnumber

The most tags it takes. A count shows beside the label, and a word past the max stays in the field rather than being lost.

labelstring = 'Tags'

Above the field, and its name for screen readers.

placeholderstring = 'Add a tag'

In the field while there are no tags yet.

namestring

Sent with a form, the tags joined by commas.

classNamestring

Added to its root. It’s 400px wide at most, and the chips wrap with the space it’s in.

Notes

• A new chip pops in from 60% of its size on a spring over 380ms. When one goes, it shrinks away in 200ms while the chips after it, and the text, slide back over 320ms to close the gap. A word that’s already a chip, in any case, flashes that chip twice over 720ms.
• Enter or a comma makes a chip, and a list pasted in with commas makes one of each. A word typed in full that’s also a suggestion takes the suggestion’s spelling.
• It’s a combobox: the arrows move through the suggestions with a plate gliding under the one they’re on, Enter takes it, and Escape shuts the list. In an empty field, Backspace or the left arrow picks out the last chip, the arrows move between chips, and Backspace or Delete removes the one picked out. Screen readers hear what came, what went and what’s picked out.
• The suggestions float under the field, over whatever is below it, so leave room there or let them cover it.
• With reduced motion, chips come and go in place, the list fades in, and a repeated word still flashes its chip.