Skip to content
Get Pro
Forms

Tag Input

A field that turns text into tags. Enter or a comma adds one, pasting a list adds several; new tags spring in from the caret and removed ones collapse while the rest close up.

$149 once · every Pro piece

Customize

Backspace and the arrow keys walk through the tags; a duplicate warms the existing tag instead.

Install

npx shadcn@latest add @obsyde/tag-input

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { TagInput } from '@/components/obsyde/ember/tag-input/TagInput';

export function Example() {
  return (
    <TagInput label="Tags" placeholder="Add a tag" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/tag-input/TagInput.tsxcomponent
  • ember/tag-input/tag-input.cssstyles
  • ember/tag-input/TagInputDemo.tsxdemo
  • ember/forms-kit/kit.tsxshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
labelLabelstring'Tags'
valueTags (comma-separated)string—
placeholderPlaceholderstring'Add a tag'
maxMax (0 = none)number0
disabledDisabledbooleanfalse