InputChip KIT

Examples API Setup

Source code

Basic

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

Plain strings

John Cleese

Eric Idle

Michael Palin

Graham Chapman

Terry Gilliam

Terry Jones

Growing height

John Cleese

Eric Idle

Michael Palin

Graham Chapman

Terry Gilliam

Terry Jones

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

love

Angular

love

Angular

love

Angular

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.

Arbitrary strings with suggestions

Only allowing items from the list and hiding values when not focused behind a custom content

Select Pythons

Using checkboxes in the dropdown and making the textfield non-writable

Multi Select

Working with objects

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

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.

Mobile dropdown with writable input

Mobile sheet with options

Native MultiSelect

John Cleese

Table

Options
Multi Select with dropdown
Multi Select

Taiga UI

See also

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

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

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

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.

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