Skip to content

Latest commit

 

History

History
196 lines (127 loc) · 4.06 KB

tag-input.md

File metadata and controls

196 lines (127 loc) · 4.06 KB
Raw

TagInput

Source

A text input that allows values to be grouped as tags.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { TagInput } from 'chayns-components';

// ...

<TagInput {...} />

Props

The TagInput-component takes the following props:

Name Type Default Required
tags Array<{ text: string | ReactNode }>
value string ''
onAddTag function
onRemoveTag function
onChange function
placeholder string
className string
style { [key: string]: string | number }
disableRemove boolean false
design number TagInput.DEFAULT_DESIGN
max number
addTagOnBlur boolean false
left ReactNode
onKeyDown function

tags

tags?: Array<{ text: string | ReactNode }>

An array of the current tags.

value

value?: string

The text value of the tag input.

onAddTag

onAddTag?: function

A callback that is invoked when the user adds a new tag (hits the enter-key).

onRemoveTag

onRemoveTag?: function

A callback that is invoked when the user removes a tag.

onChange

onChange?: function

A callback that is invoked when the user changes the text inside the tag input.

placeholder

placeholder?: string

A placeholder that is shown when the tag input is empty (does neither container a tag or text).

className

className?: string

A classname string that will be applied to the outer-most wrapper of the input.

style

style?: { [key: string]: string | number }

A React style object that will be applied to the outer-most wrapper of the input.

disableRemove

disableRemove?: boolean

Prevents removal of selected users and hides remove icon.

design

design?: number

The design of the input. Use either TagInput.DEFAULT_DESIGN or TagInput.BORDER_DESIGN.

max

max?: number

The maximum number of tags selected at once.

addTagOnBlur

addTagOnBlur?: boolean

Adds a tag on blur

left

left?: ReactNode

A string or ReactNode that will be rendered on the left side of the tag input.

onKeyDown

onKeyDown?: function

A callback for the keydown-event.