REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Form Controls

TagsInput

A text input that produces tag chips, useful for entering multiple values.

Example

Preview

Code

Props

TagsInput Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the tags input container.

value

string[]

—

The current array of tag values.

onValueChange

(values: string[]) => void

—

Callback invoked when the tag array changes.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of the input and tags.

isDisabled

boolean

false

When true, disables the input and tag removal.

TagsInputField Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the text input field.

placeholder

string

—

Placeholder text for the input field.

TagsInputTag Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for an individual tag chip.

TagsInputTagText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tag text.

TagsInputTagCloseButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tag close button.

onPress

() => void

—

Callback invoked when the tag close button is pressed.

Usage Guidelines

When to use

Use TagsInput for entering multiple values like tags, categories, or email addresses.

Best practices

•

Validate tag input to prevent duplicates and enforce formatting rules.

•

Support backspace to delete the last tag for keyboard users.

•

Show a maximum tag count or character limit when applicable.

Accessibility

Tags are announced individually with their text and a "remove" action. The input announces the current tag count.

Related Components

Tag

A compound component for displaying categorized labels with optional icons and close buttons.

Input

A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.

Badge

A compound component for displaying short status labels, counts, or tags with semantic color and variant options.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License