API REFERENCE · FORM CONTROLS
<dj-chip-typeahead>
A multi-select typeahead: type to filter options, pick from a popup list, and each choice becomes a removable chip.
It is form-associated and submits each value under name. It is built from dj-chip, dj-list, dj-popup, and dj-label.
npm install @dojo-ng/chip-typeahead
import "@dojo-ng/chip-typeahead";Choosing values
- Typing filters
options; picking one from the popup adds it as a chip. - Backspace in an empty input removes the last chip.
- The
changeevent fires with the selected values.
Free-text tags: allow-new
- By default only the configured
optionscan be chosen. - With
allow-new, Enter on text that matches no option creates a chip from that text, trimmed. If an option in the popup is highlighted, Enter picks that option instead. - New values follow
duplicates, clear the input, and join the form value like picked ones. - Only Enter adds a value. Comma does not, because a comma is a normal character in many languages.
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
options |
options |
ListOption[] |
[] |
value |
value |
string[] |
[] |
name |
name reflected |
string |
None |
label |
label |
string |
None |
placeholder |
placeholder |
string |
None |
disabled |
disabled reflected |
boolean |
false |
duplicates |
duplicates |
boolean |
false |
allowNewAllow Enter to create a chip from free-typed text that matches no option. |
allow-new reflected |
boolean |
false |
position |
position reflected |
"above""below""left""right" |
"below" |
Events
| Event | Description |
|---|---|
change | detail: selected values |
CSS parts
Style these with dj-chip-typeahead::part(name).
labelbox
Methods
checkValidity(): booleanfocus(o: FocusOptions)restoreFormState(state: File | string | FormData | null)
Types
The types that the properties above use, as they are declared in the source.
ListOption from @dojo-ng/list
export interface ListOption { value: string; label: string; disabled?: boolean; divider?: boolean; }