---
name: TagsInput
route: /Form/TagsInput
menu: Form
---

import { Playground, PropsTable } from 'docz'
import { View } from 'react-native'
import { TagsInput } from '../../../src'
import { colors } from '@barcard/functions'

## TagsInput

## About

Allows the user to select tags as they appear above the input as TagPill
components.

## Properties

<PropsTable of={TagsInput} includeDescription={true} />

## Basic Usage

<Playground>
  <View style={{ display: 'flex', flex: 1, backgroundColor: colors.primary3 }}>
    <TagsInput
      name={'Example'}
      options={[
        { id: '0', name: 'Tyrannosaurus Rex', armLength: '3 ft' },
        { id: '1', name: 'Stegosaurus', armLength: '4 ft' },
        { id: '2', name: 'Brachiosaurus', armLength: '8 ft' },
      ]}
      onChange={() => alert('Change handler called.')}
    />
  </View>
</Playground>
