InputChip KIT

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 }>

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.

MultiSelect

InputChip can be used together with dropdown in many variations showcased below, from multiple values input with suggestions to multi-select without writable input.

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.

Mask

Component can be used with Maskito to facilitate input masking.

Direction

Component can be used together with RTL direction.

Mobile

You can improve UX on mobile devices in multiple ways, depending on your case.

Table

Virtual scroll

Using virtual scroll to improve UX when working with large amount of items.

Stringify