Introduction Foundations Components Patterns Directives Pipes Motion Brand

Components

Structure

Title card

Alerts & notifications

Banner alert Banner announcement Floating action Toast alert

Buttons & actions

Button Link Pull refresh Share buttons Share link Social buttons Split button Toggle buttons

Cards

Card Widget

Forms

Checkbox card Checkbox File select Input Label Location input Multi select Multiple location input Radio Search Select Slider Smart textarea Textarea Toggle

Gallery / images / media

Gallery mosaic

Icons / images / media

Animated svg File viewer Icon Image cropper

Layouts

Container Grid Page layout Table

Navigation

Breadcrumbs Pagination Tabs

Popups / overlays

Callout Drawer Dropdown filter Highlight Modal More options Tooltip

Progress & loading indicators

Countdown timer Loading text Progress bar Progress steps Spinner

Tags

Tag

Typography

Heading Hr

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.
Contents
Default Adding text Allow input on blur Counter Dropdown item select color Hide input on non empty Invalid inputs Items Max length Max rows Options Secondary placeholder Show highlight initially Show plus icon Validation
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.