Tags Input

Free-form tags: type and press Enter or comma; Backspace on empty input removes the last tag.

Import

import { TagsInput } from '@marbleui/ui'

Props

<TagsInput>

Prop	Type	Default	Description
allowDuplicates	`boolean`	`—`
className	`string`	`—`
defaultValue	`string[]`	`[]`
delimiters	`string[]`	`[',']`	Keys that commit the current text as a tag. Enter is always included.
description	`ReactNode`	`—`
label	`ReactNode`	`—`
max	`number`	`—`
onChange	`(tags: string[]) => void`	`—`
placeholder	`string`	`'Add tag…'`
value	`string[]`	`—`
variant	`FieldVariant`	`—`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Group · React Aria Input. Follow the primitive's docs for the full keyboard map.

Usage notes

Free-form tag entry: type text and commit it as a removable tag. For picking from a fixed set use MultiSelect; to display tags use TagGroup.

<TagsInput
  label="Keywords"
  description="Press Enter or comma to add."
  defaultValue={['design', 'react']}
  max={8}
  onChange={setKeywords}
/>

Uncontrolled: defaultValue. Controlled: value + onChange (a string[]).
Enter always commits. delimiters adds more keys and defaults to [',']. Blur also commits the typed text.
Backspace on an empty input removes the last tag. Duplicates are ignored unless allowDuplicates; at max the input is disabled.
There is no errorMessage or isRequired: validate in your own code.

Example source · show

import { TagsInput } from './tags-input'

export const styles = {
  Outline: () => <TagsInput className="w-80" label="Keywords" defaultValue={['design', 'react']} description="Press Enter or comma to add." />,
  Filled: () => <TagsInput className="w-80" variant="filled" label="Recipients" placeholder="Add email…" max={4} defaultValue={['maya@acme.com']} />,
}

Source: packages/ui/src/tags-input/tags-input.tsx

Catalog

Category: inputs
Priority: Core
Primitive: react-aria
React Aria: TokenField