InputChip KIT

Examples API Setup

InputChip = Textfield multi + Chip + ❤️

Basic

#

Textfield[multi] is used to display array of items. By default they are presented as plain strings.

Chips

#

Use *tuiItem directive to provide custom representation. You can use tui-input-chip out of the box or implement your own. The context is TuiContext<{ item: T, index: number }>

Customization

#

You can customize many aspects of the component, from standard textfield options like icons and tooltips to changing the appearance of each individual chip.

Keep
it
simple

Disabled items

#

Individual tags can be disabled using disabledItemHandler , this would prevent them from being edited, removed or added. Note: keep in mind cleaner would still empty the control. If you want a different behavior, you can disable built-in cleaner and provide your own

Required
Obligatory
Removable

Dropdown

#

With disabledItemHandler you can force the component to only accept suggested values

Mask

#

Component can be used with Maskito to facilitate input masking.