TagsInput

TagsInput turns short free-form values into removable tokens. Use it for labels, invite emails, filters, and keyword entry.

#Default usage

<TagsInput defaultValue={["design", "docs"]} placeholder="Add label" />

#Import

import { TagsInput, TokenInput } from "@froggdesign/enter-ui-react";

#Variants

<TagsInput
  placeholder="Add email"
  validateTag={(value) => value.includes("@")}
/>

#Accessibility

Each token has a named remove button. Backspace removes the last token when the text field is empty. Use Field when the input needs label, help text, or an error message.

#API

• value, defaultValue, and onValueChange control tokens.
• validateTag accepts or rejects a candidate before it is committed.
• maxTags limits token count.
• disabled and invalid map to aria state and data attributes.
• TokenInput is an alias for teams that use token terminology.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.