InputChip KIT
See also
Textfield, TextareaInputChip uses specifically modified Textfield 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 |
|---|
Taiga UI