Taiga UI 5.0 is out!

InputChip KIT

Examples API GitHub

On this page

See also

Input, TextareaInputChip 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.
John CleeseEric IdleMichael PalinGraham ChapmanTerry GilliamTerry Jones
John CleeseEric IdleMichael PalinGraham ChapmanTerry GilliamTerry Jones
    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    [rows]="1"
>
    <label tuiLabel>Plain strings</label>
    <input
        placeholder="Placeholder"
        tuiInputChip
        [separator]="separator"
        [(ngModel)]="value"
    />
</tui-textfield>
<tui-textfield multi>
    <label tuiLabel>Growing height</label>
    <input
        placeholder="Placeholder"
        tuiInputChip
        [(ngModel)]="value"
    />
</tui-textfield>

    

      
      
    

  
    
      :host {
    display: flex;
    inline-size: 19rem;
    flex-direction: column;
    gap: 1rem;
}

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 }>
I
love
Angular
I
love
Angular
I
love
Angular 
    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    tuiTextfieldSize="l"
>
    <input
        placeholder="Enter"
        tuiInputChip
        [unique]="false"
        [(ngModel)]="value"
    />

    <tui-input-chip *tuiItem />
</tui-textfield>

<tui-textfield
    multi
    tuiTextfieldSize="m"
>
    <input
        placeholder="Enter"
        tuiInputChip
        [unique]="false"
        [(ngModel)]="value"
    />

    <tui-input-chip *tuiItem />
</tui-textfield>

<tui-textfield
    multi
    tuiTextfieldSize="s"
>
    <input
        placeholder="Enter"
        tuiInputChip
        [unique]="false"
        [(ngModel)]="value"
    />

    <tui-input-chip *tuiItem />
</tui-textfield>

    

      
      
    

  
    
      :host {
    display: flex;
    inline-size: 19rem;
    flex-direction: column;
    gap: 1rem;
}

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 
    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    [disabledItemHandler]="handler"
    [style.width.rem]="19"
    [tuiTextfieldCleaner]="false"
>
    <input
        tuiInputChip
        [formControl]="control"
    />
    @if (control.value.length > 2) {
        <button
            tuiButtonX
            (click)="control.setValue(this.required)"
        >
            Clear
        </button>
    }
    <tui-input-chip *tuiItem />
</tui-textfield>

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. 
    
      
    

      
      
    

  
    
      <label tuiLabel>
    Arbitrary strings with suggestions
    <tui-textfield multi>
        <input
            placeholder="Type something"
            tuiInputChip
            [(ngModel)]="arbitrary"
        />
        <tui-input-chip *tuiItem />
        @if (items | tuiHideSelected | tuiFilterByInput; as items) {
            @if (items.length) {
                <ng-template tuiDropdown>
                    <tui-data-list-wrapper [items]="items" />
                </ng-template>
            }
        }
    </tui-textfield>
</label>

<label tuiLabel>
    Only allowing items from the list and hiding values when not focused behind a custom content
    <tui-textfield
        #input
        multi
        [content]="!input.focused() && pythons.length ? `Selected ${pythons.length} out of ${items.length}` : ''"
        [disabledItemHandler]="disabled"
    >
        <label tuiLabel>Select Pythons</label>
        <input
            tuiInputChip
            [placeholder]="pythons.length ? '' : 'Type for suggestions'"
            [(ngModel)]="pythons"
        />
        @if (!input.focused()) {
            <ng-template tuiItem />
        }
        @if (items | tuiHideSelected | tuiFilterByInput; as items) {
            @if (items.length) {
                <ng-template tuiDropdown>
                    <tui-data-list-wrapper [items]="items" />
                </ng-template>
            }
        }
    </tui-textfield>
</label>

<label tuiLabel>
    Using checkboxes in the dropdown and making the textfield non-writable
    <tui-textfield
        multi
        tuiChevron
    >
        <label tuiLabel>Multi Select</label>
        <input
            tuiInputChip
            tuiSelectLike
            [placeholder]="multi.length ? '' : 'Pick from the list'"
            [(ngModel)]="multi"
        />
        <tui-data-list-wrapper
            *tuiDropdown
            tuiMultiSelectGroup
            [items]="items"
        />
    </tui-textfield>
</label>

<label tuiLabel>
    Conditional input in textfield
    <tui-textfield
        multi
        tuiChevron
    >
        <label tuiLabel>Multi Select with if/else</label>
        @if (filter) {
            <input
                tuiInputChip
                [placeholder]="conditionalMulti.length ? '' : 'Pick from the list'"
                [(ngModel)]="conditionalMulti"
            />
        } @else {
            <input
                tuiInputChip
                tuiSelectLike
                [placeholder]="conditionalMulti.length ? '' : 'Pick from the list'"
                [(ngModel)]="conditionalMulti"
            />
        }
        <tui-data-list-wrapper
            *tuiDropdown
            tuiMultiSelectGroup
            [items]="items"
        />
    </tui-textfield>
</label>
<label tuiLabel>
    <input
        tuiCheckbox
        type="checkbox"
        [(ngModel)]="filter"
    />
    Toggle filter
</label>

<label tuiLabel>
    Working with objects
    <tui-textfield
        multi
        tuiChevron
        [disabledItemHandler]="strings"
        [stringify]="stringify"
    >
        <input
            tuiInputChip
            [placeholder]="objects.length ? '' : 'Picking objects'"
            [(ngModel)]="objects"
        />
        <tui-input-chip *tuiItem />
        <tui-data-list *tuiDropdown>
            <tui-opt-group
                label="Pythons"
                tuiMultiSelectGroup
            >
                @for (user of users | tuiFilterByInput; track user) {
                    <button
                        tuiOption
                        [value]="user"
                    >
                        {{ user.name }}
                    </button>
                }
            </tui-opt-group>
            <tui-opt-group
                label="Collaborators"
                tuiMultiSelectGroup
            >
                @for (user of more | tuiFilterByInput; track user) {
                    <button
                        tuiOption
                        [value]="user"
                    >
                        {{ user.name }}
                    </button>
                }
            </tui-opt-group>
        </tui-data-list>
    </tui-textfield>
</label>

    

      
      
    

  
    
      :host {
    display: flex;
    inline-size: 19rem;
    flex-direction: column;
    gap: 1rem;
}

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 
    
      
    

      
      
    

  
    
      <tui-textfield
    iconStart="@tui.heart"
    multi
    [style.width.rem]="19"
>
    <input
        tuiInputChip
        [formControl]="control"
        [placeholder]="!control.value?.length ? 'Type something' : ''"
    />
    <tui-icon tuiTooltip="Only small words" />
    <tui-input-chip
        *tuiItem="let context"
        [appearance]="context.item.length > 5 ? 'negative' : 'positive'"
        [editable]="false"
        [iconStart]="context.item.length > 5 ? '@tui.info' : ''"
        [tuiHint]="context.item.length > 5 ? 'Please keep it under 6 chars' : ''"
    />
</tui-textfield>

Mask

Component can be used with Maskito to facilitate input masking. 
    
      
    

      
      
    

  
    
      <tui-textfield
    filler="•••"
    multi
    [style.width.rem]="19"
>
    <input
        placeholder="Type 3 digits"
        tuiInputChip
        [formControl]="control"
        [maskito]="mask"
    />

    <tui-input-chip
        *tuiItem
        [maskito]="mask"
    />
</tui-textfield>

Direction

Component can be used together with RTL direction.
حبيبيصباح الخيرمن فضلكشكراأنا آسفتصبح على خير
حبيبي
صباح الخير
من فضلك
شكرا
أنا آسف
تصبح على خير
حبيبي
صباح الخير
من فضلك
شكرا
أنا آسف
تصبح على خير 
    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    [rows]="1"
>
    <label tuiLabel>كلمات عربية</label>
    <input
        placeholder="مرحبا"
        tuiInputChip
        [(ngModel)]="value"
    />
</tui-textfield>

<tui-textfield
    multi
    [rows]="1"
>
    <input
        placeholder="مرحبا"
        tuiInputChip
        [(ngModel)]="value"
    />
    <tui-input-chip *tuiItem />
</tui-textfield>

<tui-textfield
    multi
    [rows]="2"
>
    <input
        placeholder="مرحبا"
        tuiInputChip
        [(ngModel)]="value"
    />
    <tui-input-chip *tuiItem />
</tui-textfield>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 19rem;
}

Mobile

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

      
      
    

  
    
      <label tuiLabel>
    Mobile dropdown with writable input
    <tui-textfield
        multi
        tuiChevron
        tuiDropdownMobile
        [disabledItemHandler]="disabled"
    >
        <input
            placeholder="Type something"
            tuiInputChip
            [(ngModel)]="writable"
        />

        @if (items | tuiFilterByInput; as items) {
            <ng-template
                let-close
                tuiDropdown
            >
                <tui-data-list-wrapper
                    tuiMultiSelectGroup
                    [items]="items"
                />
                <button
                    appearance="accent"
                    size="m"
                    tuiButton
                    tuiDropdownButton
                    type="button"
                    (click)="close()"
                >
                    Done
                </button>
            </ng-template>
        }
    </tui-textfield>
</label>

<label tuiLabel>
    Mobile sheet with options
    <tui-textfield
        multi
        tuiChevron
        tuiDropdownSheet
    >
        <input
            tuiInputChip
            tuiSelectLike
            [placeholder]="sheet.length ? '' : 'Select Pythons'"
            [(ngModel)]="sheet"
        />
        <tui-data-list-wrapper
            *tuiDropdown
            tuiMultiSelectGroup
            [items]="[items]"
            [labels]="['Select Pythons']"
        />
    </tui-textfield>
</label>

<label tuiLabel>
    Native MultiSelect
    <tui-textfield
        multi
        tuiChevron
        [identityMatcher]="identity"
        [stringify]="stringify"
    >
        <select
            tuiMultiSelect
            [items]="[users]"
            [labels]="['Pythons']"
            [placeholder]="native.length ? 'and...' : 'Select Pythons'"
            [(ngModel)]="native"
        ></select>
    </tui-textfield>
</label>

    

      
      
    

  
    
      :host {
    display: flex;
    inline-size: 19rem;
    flex-direction: column;
    gap: 1rem;
}

Table

Options
    
      
    

      
      
    

  
    
      <table tuiTable>
    <thead>
        <tr>
            <th tuiTh>Options</th>
        </tr>
    </thead>
    <tbody tuiTbody>
        <tr>
            <td tuiTd>
                <tui-textfield
                    multi
                    tuiChevron
                >
                    <label tuiLabel>Multi Select with dropdown</label>
                    <input
                        placeholder="Pick from the list"
                        tuiInputChip
                        tuiSelectLike
                        [formControl]="multiControl"
                        [style.width.rem]="5"
                    />
                    <tui-data-list-wrapper
                        *tuiDropdown
                        tuiMultiSelectGroup
                        [items]="items"
                    />
                </tui-textfield>
            </td>
        </tr>
        <tr>
            <td tuiTd>
                <tui-textfield multi>
                    <label tuiLabel>Multi Select</label>
                    <input
                        placeholder="Placeholder"
                        tuiInputChip
                        [formControl]="multiControl2"
                    />
                </tui-textfield>
            </td>
        </tr>
    </tbody>
</table>

    

      
      
    

  
    
      :host {
    display: flex;
    inline-size: 19rem;
    flex-direction: column;
}

Virtual scroll

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

    
      
    

      
      
    

  
    
      <tui-textfield
    multi
    tuiChevron
    [content]="content"
>
    <label tuiLabel>Select items</label>
    <input
        tuiInputChip
        tuiSelectLike
        [(ngModel)]="value"
    />
    <ng-template tuiItem />
    <ng-container *tuiDropdown>
        <tui-textfield
            #filter
            tuiTextfieldSize="m"
            [style.margin.rem]="0.25"
        >
            <input
                placeholder="Type to filter"
                tuiInput
            />
        </tui-textfield>
        <cdk-virtual-scroll-viewport
            tuiScrollable
            [itemSize]="48"
            [style.height.px]="filtered().length * 48 + 8"
            [style.max-height.px]="200"
            [style.min-height.px]="56"
        >
            <tui-data-list tuiMultiSelectGroup>
                <button
                    *cdkVirtualFor="let item of filtered()"
                    tuiOption
                    [value]="item"
                >
                    {{ item }}
                </button>
            </tui-data-list>
        </cdk-virtual-scroll-viewport>
    </ng-container>
</tui-textfield>

<p>
    <button
        tuiButton
        type="button"
        (click)="onClick()"
    >
        Select bazillion
    </button>
</p>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

[tuiScrollable] {
    .scrollbar-hidden();
}

Stringify 

    
      
    

      
      
    

  
    
      <label tuiLabel>
    <tui-textfield
        multi
        tuiChevron
        [stringify]="stringify"
    >
        <input
            tuiInputChip
            [placeholder]="value.length ? '' : 'Picking users'"
            [(ngModel)]="value"
        />

        <tui-input-chip *tuiItem />

        <tui-data-list
            *tuiDropdown
            tuiMultiSelectGroup
        >
            @for (item of items; track $index) {
                <button
                    tuiOption
                    [value]="item.nickname"
                >
                    {{ item.name }} ({{ item.nickname }})
                </button>
            }
        </tui-data-list>
    </tui-textfield>
</label>
GitHub StackBlitz