Chips

Chips are compact elements for short values, attributes, selected items, filters, or tags. They can be static labels, selectable options, removable or editable tokens, input-created tags, or autocomplete-selected values.

Use them for:

Compact values: Show tags, categories, filters, roles, or attributes.
Selectable options: Use a chip listbox when users choose one or many short options.
Token input: Use a chip grid with chip input when users create a list of values.
Editable selections: Let users remove, edit, autocomplete, or reorder chip values.

Do not use Chips as badges on icons, command buttons, mode toggles, long labels, alerts, or replacements for checkbox, radio, or select controls when those controls better match the task.

ngs-chip

Prop	Type	Default
appearance The appearance of the chip.	string	filled
disabled Whether the chip is disabled.	boolean	false
value The value of the chip.	any	undefined

Event	Description
destroyed	Emitted when the chip is destroyed.
removed	Emitted when the chip is removed.

ngs-chip-listbox

Prop	Type	Default
multiple Whether the chip listbox allows multiple selection.	boolean	false
disabled Whether the chip listbox is disabled.	boolean	false

ngs-chip-grid

Prop	Type	Default
id The unique ID of the chip grid.	string	ngs-chip-grid-x
placeholder The placeholder for the chip grid.	string	–
required Whether the chip grid is required.	boolean	false
disabled Whether the chip grid is disabled.	boolean	false

ngs-chip-option

Prop	Type	Default
selected Whether the chip option is selected.	boolean	false

Event	Description
selectionChange	Emitted when the chip option selection state changes.

ngs-chip-row

Prop	Type	Default
editable Whether the chip row is editable.	boolean	false

Event	Description
edited	Emitted when the chip row value is edited.

ngsChipInput

Prop	Type	Default
ngsChipInputFor The chip grid that the input is associated with.	ChipGrid	–
ngsChipInputSeparatorKeyCodes The list of key codes that will trigger a chip input token end event.	number[] \| ReadonlySet<number>	–
ngsChipInputAddOnBlur Whether to add a chip when the input loses focus.	boolean	false

Event	Description
chipInputTokenEnd	Emitted when a chip input token end event is triggered.

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates