MultiValueInput

free

MultiValueInput turns repeated text entries into removable tag values.

PriorityRetailFollow-up

import MultiValueInput from '@/components/ui/multi-value-input';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add MultiValueInput

pnpm dlx nateui@latest add MultiValueInput

yarn dlx nateui@latest add MultiValueInput

Examples

Basic

ReactTypeScript

import MultiValueInput from '@/components/ui/multi-value-input';

export default function BasicDemo() {
  return (

Controlled

JavaScriptCSS

Current skills: JavaScript, CSS

import { useState } from 'react';
import MultiValueInput from '@/components/ui/multi-value-input';

export default function ControlledDemo() {

Validation

import { useState } from 'react';
import Form from '@/components/ui/form';
import MultiValueInput from '@/components/ui/multi-value-input';

Max Tags

DesignFrontend

2 of 4 tags used.

import { useState } from 'react';
import MultiValueInput from '@/components/ui/multi-value-input';

export default function MaxTagsDemo() {

Size

Small

Medium

Large

import MultiValueInput from '@/components/ui/multi-value-input';

export default function SizeDemo() {
  return (

Overflow

NorthwindWholesalePriorityQ3RenewalPartner

import MultiValueInput from '@/components/ui/multi-value-input';

const tags = [
  'Northwind',

Disabled

ArchivedLocked

import MultiValueInput from '@/components/ui/multi-value-input';

export default function DisabledDemo() {
  return (

API

MultiValueInput renders a tag list plus an inline text input. Press Enter to add a value, use Backspace/Delete to remove focused tags, and click the overflow counter to inspect hidden tags.

Prop	Description	Type	Default
`className`	Class names applied to the root control.	`string`	`''`
`defaultValue`	Initial tags for uncontrolled usage.	`string[]`	`[]`
`disabled`	Prevents editing and tag removal, and applies disabled control styling.	`boolean`	`false`
`invalid`	Applies invalid styling; also inherits invalid state from `Form.Field`.	`boolean`	-
`maxTags`	Maximum number of tags that can be added.	`number`	-
`onChange`	Called with the next tag list whenever tags change.	`MultiValueChangeHandler`	-
`onTagAdd`	Called after a tag is accepted.	`MultiValueTagHandler`	-
`onTagRemove`	Called after a tag is removed.	`MultiValueTagHandler`	-
`placeholder`	Placeholder text shown while no tags are present.	`string`	-
`readOnly`	Marks the text input read-only. Removal buttons still follow `disabled`.	`boolean`	-
`size`	Control size.	`ControlSize`	`'md'`
`validate`	Returns whether a new tag should be accepted.	`MultiValueValidator`	-
`value`	Controlled tag list.	`string[]`	-
`...nativeDivProps`	Native props applied to the root div, except `onChange` and `defaultValue`.	`NativeMultiValueInputProps`	-

Types

type ControlSize = 'sm' | 'md' | 'lg';
type MultiValueChangeHandler = (tags: string[]) => void;
type MultiValueTagHandler = (tag: string, allTags: string[]) => void;
type MultiValueValidator = (tag: string) => boolean;
type NativeMultiValueInputProps = Omit<
  HTMLAttributes<HTMLDivElement>,
  'onChange' | 'defaultValue'
>;