Introduction Foundations Components Patterns Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

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.

disableInput ?: boolean = false

Disable the input element from showing. The default is false. When set to true, the input element will not show. This option is useful for preventing the user from inputting while a load is in progress.

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.