README
MoleculeInputTags
MoleculeInputTags
is an AtomInput
with the behavior of adding/removing AtomTag
as a list
Installation
$ npm install @s-ui/react-molecule-input-tags --save
Usage
import MoleculeInputTags from '@s-ui/react-molecule-input-tags'
const closeIcon = () => <span>X</span>
Basic usage
<MoleculeInputTags tagsCloseIcon={closeIcon} />
Entering tags on Tab
<MoleculeInputTags tagsCloseIcon={closeIcon} onEnterKey="Tab" />
Initial list of tags
<MoleculeInputTags tagsCloseIcon={closeIcon} tags={['john','paul','george','ringo']} />
props AtomInput
All props of AtomInput
can also be passed to MoleculeInputTags
<MoleculeInputTags tagsCloseIcon={closeIcon} errorState={true} />
Just unique values
You can set allowDuplicates
to false to force unique values
<MoleculeInputTags allowDuplicates={false} />
Max tags
use maxTags
prop to set a number of maximum tags that can be entered, after reaching that number the field gets disabled
<MoleculeInputTags maxTags={3} />
Find full description and more examples in the demo page.