Taiga UI 5 is out!

InputChip KIT

Examples API GitHub

On this page

See also

Input, Textarea, ComboBox, Select, ButtonSelect
InputChip uses specifically modified Input to represent array of selectable items.

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.
Required
Obligatory
Removable
    
      
    

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.
Keep
it
simple
    
      
    

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

Options
    
      
    

Virtual scroll

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

    
      
    

Stringify