TextArrayInput

Lets users enter multiple free-text values (like tags or email addresses) displayed as removable badges.

Installation

pnpm dlx shadcn@latest add @shadmin/text-array-input

This input allows editing values that are arrays of strings, e.g. ["tag1", "tag2"].

Usage

import { TextArrayInput } from "@/components/admin";
 
<TextArrayInput source="tags" />;

Users type text and press Enter to add items. Items appear as removable badges. Press Backspace when the input is empty to remove the last item.

Tip: If you need to let users choose values from a predefined list instead, use <AutocompleteArrayInput>.

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field name
`className`	Optional	`string`	-	CSS classes
`defaultValue`	Optional	`string[]`	-	Default value
`disabled`	Optional	`boolean`	-	Disable the input
`format`	Optional	`function`	-	Callback to convert API value to form value
`helperText`	Optional	`ReactNode`	-	Help text displayed below the input
`label`	Optional	`string \| false`	Inferred from `source`	Custom label, or `false` to hide it
`options`	Optional	`string[]`	-	Preset suggestion strings shown in a dropdown
`parse`	Optional	`function`	-	Callback to convert form value to API value
`placeholder`	Optional	`string`	-	Input placeholder (shown when no values exist)
`readOnly`	Optional	`boolean`	-	Make the input read-only
`renderTags`	Optional	`(tags, getTagProps) => ReactNode`	-	Custom renderer for the selected-value chips
`validate`	Optional	`Validator \| Validator[]`	-	Validation rules

Keyboard Shortcuts

Key	Action
Enter	Add the typed text as a new value
Backspace	Remove the last value (when input is empty)
Escape	Blur the input

`renderTags`

Custom render function for the selected-value chips. When provided it replaces the default <Badge> per tag. Receives the full tags array and a getTagProps(tag, index) helper that returns { key, onDelete }.

import { Tag } from "lucide-react";
 
<TextArrayInput
  source="tags"
  renderTags={(tags, getTagProps) =>
    tags.map((tag, index) => {
      const { key, onDelete } = getTagProps(tag, index);
      return (
        <span
          key={key}
          className="flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-xs"
        >
          <Tag className="size-3" />
          {tag}
          <button onClick={onDelete} type="button">
            ×
          </button>
        </span>
      );
    })
  }
/>;

`options`

An array of preset suggestion strings. When the user types in the input, matching suggestions appear in a dropdown and can be selected by clicking — this adds the suggestion to the value array without pressing Enter.

Only suggestions that contain the typed text (case-insensitive) and are not already selected are shown.

<TextArrayInput
  source="tags"
  options={["react", "typescript", "javascript", "css", "html"]}
/>

Format and Parse

<TextArrayInput
  source="tags"
  format={(v) => v?.map((tag) => tag.toLowerCase())}
  parse={(v) => v?.map((tag) => tag.trim().toLowerCase())}
/>