Multi select
Multiselects for typing multiple options
Check out the forms info page in the sidebar for more info regarding FormControls. Please note that disabling, and setting this FormControl input to invalid will be reflected by the component. Please note this component will fill its space horizontally, and can grow vertically.
Default validation
Dynamic validation - First validation happens only on blur, and validates on keyup once an error exists
Inputs
control : FormControl<readonly T[]>
maxRows : number
addingText ?: any = $localize`Adding`
Customize the text displayed for adding options.
The default is 'Adding 'text''. When set, it will be displayed as 'displayText 'text''.
allowBulkEntry ?: boolean = false
Allow pasting a string separated by `bulkEntrySeparators` to add multiple
emails at once. Bulk entry by username is not supported
allowCustomEntry ?: T extends string ? boolean : false
Allow custom items to be added by the user.
Note: `control` must accept `string` type if set to `true`.
blurBehaviour ?: MultiSelectInputBlurBehaviour = 'clear'
What the input should do when blurred.
- 'clear' empties the field (default)
- 'add' adds the current value as a multiselect item
- 'none' leaves the text
bulkEntrySeparators ?: readonly string[] = [',']
Separators used to parse the string pasted into the input.
Use with `allowBulkEntry`.
counterPosition ?: MultiSelectCounterPosition = MultiSelectCounterPosition.LEFT
disableDropdown ?: boolean = false
Disable the dropdown from showing.
The default is false. When set to true, the dropdown will not show.
This option is useful if using a different design to select the options.
dropdownItemSelectColor ?: MultiSelectItemHighlightColor = MultiSelectItemHighlightColor.BLUE_DARK
Customize the color of a dropdown item when it is selected.
dynamicValidation ?: boolean = false
First validation happens only on blur, and validates on keyup once an error exists
hideInputOnNonEmpty ?: boolean = false
Conditionally hide the input element when there are selected items.
If there are already selected items, the input element will be hidden.
invalidInputs ?: readonly string[] = []
maxLength ?: number
Number of characters you can type in the input.
This will only work when used with allowCustomEntry
maxSelections ?: number
openDropdownOnFocus ?: boolean = false
options ?: readonly SelectItem<T>[] = []
placeholder ?: string
default placeholder when there's no entry yet
secondaryPlaceholder ?: string = ''
placeholder when there's already an entry
showHighlightInitially ?: boolean = true
Initially show the highlight effect in the dropdown.
If set to false, users can trigger the highlight by navigating using the 'up' or 'down' buttons.
showPlusIcon ?: boolean = false
Customize the appearance of the adding line in the dropdown.
When enabled, an add icon and the specified text will appear in blue.
size ?: MultiSelectSize = MultiSelectSize.MID
textColor ?: FontColor = FontColor.FOREGROUND
Outputs
inputChange ?: any = new EventEmitter<string>()
itemRemoved ?: any = new EventEmitter<T | string>()
This event carries the item that was removed.
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.