Tags Input

The Tags Input component provides a text field for adding and managing a collection of tags or tokens.

Basic Usage

React Vue

import { TagsInput } from "@paramanu/forms-react"

export default function App() {
  return (
    <TagsInput>
      <span className="pm-tag">React</span>
      <span className="pm-tag">Vue</span>
      <input placeholder="Add tag..." />
    </TagsInput>
  )
}

<div class="pm-tags-input pm-tags-input--outline pm-tags-input--md" role="group">
  <span class="pm-tag">React</span>
  <span class="pm-tag">Vue</span>
  <input class="pm-input pm-input--outline pm-input--md" placeholder="Add tag..." />
</div>

Accessibility

Feature	Detail
`role="group"`	Container groups the tags and input
Keyboard	Enter adds a tag, Backspace removes the last
`aria-disabled`	Applied when `disabled` is true

Best Practices

Use clear labels to indicate what tags represent.
Allow removing individual tags with a close button.

Props

Prop	Type	Default	Description
`variant`	`"outline" \| "filled" \| "unstyled"`	`"outline"`	Visual variant
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Input size
`disabled`	`boolean`	`false`	Disabled state
`invalid`	`boolean`	`false`	Invalid state

CSS Classes

Class	Description
`pm-tags-input`	Wrapper base class
`pm-tags-input--outline`	Outline variant
`pm-tags-input--filled`	Filled variant
`pm-tags-input--disabled`	Disabled state
`pm-tags-input--invalid`	Invalid state