Components/Inputs/TagsInput

TagsInput

Inputs

Freeform tag entry — type and press Enter to create tags.

Renders entered tags as Badge chips inside the input. Tags are committed on comma, space, or Enter. Supports max count, duplicate prevention, and paste-to-split.

Usage

import { TagsInput } from "nosible-ux"

export default function Example() {
  return (
    <TagsInput label="Watchlist tags" placeholder="Add tag..." />
  )
}

Examples

With max and no duplicates

Signal filters

earningsguidance

Up to 5 tags

Error state

Required topics

At least one topic is required.

Accessibility

The input has aria-invalid when error is present. Each tag's remove button has aria-label="Remove [tag]". Backspace on empty input removes the last tag.

Props

Name	Type	Default	Description
`allowDuplicates`	`boolean \| undefined`	`false`	Allow the same tag more than once.
`clearable`	`boolean \| undefined`	`false`	When true, shows a clear-all button on the right.
`defaultValue`	`string[] \| undefined`	—	Uncontrolled initial tags.
`description`	`string \| undefined`	—	Helper text below the input. Suppressed when `error` is present.
`disabled`	`boolean \| undefined`	—
`error`	`string \| undefined`	—	Validation error.
`label`	`string \| undefined`	—	Label rendered ALL-CAPS in Space Mono above the input.
`maxTags`	`number \| undefined`	—	Maximum number of tags allowed.
`onChange`	`((tags: string[]) => void) \| undefined`	—	Called when the tag list changes.
`placeholder`	`string \| undefined`	—	Input placeholder shown when there are no tags and nothing typed.
`splitChars`	`string[] \| undefined`	`[",", " "]`	Characters that commit the current input as a tag.
`value`	`string[] \| undefined`	—	Controlled tag list.
`variant`	`"default" \| "filled" \| "outline" \| undefined`	`"default"`	Visual variant.

← All Components Getting Started →