Keyboard Interactions

Docs

Learn how to integrate keyboard shortcuts and commands with the Emblor tag input component.

Key	Description
Delete	When a tag is active, remove it and set the next tag on the right as active.
Backspace	When a tag is active, remove it and set the previous tag on the left as active.
ArrowRight	Move the active state to the next tag.
ArrowLeft	Move the active state to the previous tag.
Home	Set the first tag as active.
End	Set the last tag as active.

Managing Active Tag State

To fully utilize the keyboard navigation features of the Tag Input component, you need to manage the active tag state externally. This involves setting up state hooks for activeTagIndex and setActiveTagIndex in your component that integrates the Tag Input. Here’s a quick example to show you how:

 
const [tags, setTags] = React.useState<Tag[]>([]);
const [activeTagIndex, setActiveTagIndex] = React.useState<number | null>(null);
 
<TagInput
  {...field}
  placeholder="Enter a topic"
  tags={tags}
  setTags={(newTags) => {
    setTags(newTags);
    setValue('topics', newTags as [Tag, ...Tag[]]);
  }}
  activeTagIndex={activeTagIndex}
  setActiveTagIndex={setActiveTagIndex}
/>;

Demo

Try out the keyboard interactions in the demo below.

SportsProgrammingTravel