TagInput

A text input that converts typed values into removable Chip tags. Pressing Return or typing a comma creates a new tag. Tapping × removes a tag.

When to use: Any multi-value text entry — skills, interests, email recipients, keyword tags, categories.

When not to use: A fixed set of predefined options — use a Chip filter group or Radio/Checkbox instead. Long tags (sentences) — TagInput chips are optimized for short labels.

Import

import { TagInput } from '@/components';

Usage

const [tags, setTags] = useState<string[]>(['React Native', 'TypeScript']);

<TagInput
  tags={tags}
  onTagsChange={setTags}
  placeholder="Add a skill…"
  maxTags={10}
/>

Props

Prop	Type	Default	Description
tags	string[]	—	Current tag array (required)
onTagsChange	(tags: string[]) => void	—	Change handler (required)
placeholder	string	'Add tag…'	Input placeholder
maxTags	number	—	Maximum number of tags
testID	string	—

Interaction model

1. User types a tag value in the input
2. Pressing Return or typing a comma converts the text to a chip and clears the input
3. Tapping × on a chip removes that tag
4. When maxTags is reached, the input is hidden

In a form

<FormField label="Skills" value="" onChangeText={() => {}} />
{/* Replace the Input with TagInput for the value slot when using custom layouts */}

{/* Or use TagInput standalone, preceded by a Text label: */}
<Text variant="label">Skills</Text>
<TagInput tags={skills} onTagsChange={setSkills} placeholder="Add a skill…" />

Related

• Chip — the removable chip atom used inside TagInput
• FormField — standard form input with label + error