tag-input

v4.15.0

STATUS

Passing

DOWNLOADS

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

React

1 contributor

Install tag-input as a package?

Copied

npm i @bit/segmentio.evergreen.tag-input

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

Properties

Name	Type	Default value	Description
children	`node`		The badge content
onRemove	`function`		Callback invoked when the removal icon is clicked. (event) => void
isRemovable	`bool`		Whether or not the tag can be removed.
addOnBlur	`bool`	`false`	Whether or not the inputValue should be added to the tags when the input blurs.
className	`string`		The class name to apply to the container component.
disabled	`bool`	`false`	Whether or not the input should be disabled.
height	`number`	`32`	The vertical size of the input
inputProps	`object`		Props to pass to the input component. Note that `ref` and `key` are not supported. See `inputRef`.
inputRef	`function`		Ref handler for the element. (input: HTMLInputElement \| null) => void
onAdd	`function`		Callback invoked when new tags are added. Returning `false` will prevent clearing the input. (values: Array) => void \| false
onBlur	`function`		Callback invoked when focus on the input blurs. (event) => void
onChange	`function`		Callback invoked when the tag values change. Returning `false` will prevent clearing the input. (values: Array) => void \| false
onFocus	`function`		Callback invoked when the input receives focus. (event) => void
onInputChange	`function`		Callback invoked when the value of the is changed. Shorthand for `inputProps={{ onChange }}`. (event) => void
onRemove	`function`		Callback invoked when a tag is removed. Receives value and index of removed tag. (value: string \| node, index: number) => void
separator	`string \| RegExp \| false`	`/[,\n\r]/`	Value or RegExp to split on pasted text or on enter keypress
tagProps	`object \| function`	`{}`	Provide props to tag component (actually `Badge`, for now).
theme (required)	`object`		Theme provided by ThemeProvider.
values	`node[]`	`[]`	Controlled tag values. Each value is rendered inside a tag.