Blueprint UI

Selector: bp-multi-select

Inputs

Multiselect inputs
Input	Type	Description	Notes
label	string	The label text for the multi-select.	Required.
isLabelHidden	boolean	Determines if the label is visually hidden.	Default is "false". When "true" the label is hidden.
isInline	boolean	Determines whether to show the label and select inline with each other, or stacked.	When "true" the label and select are inline.
optionItems	string[] \| object[]	The data used to populate the options of the multi-select.	This can be either an array of strings, or an array of objects. Individual options can be disabled by adding a key:value pair of disabled:true to the object for that option.
isSearchable	boolean	Determines if the multi-select is searchable.	Default is "false". When "true" the multi-select is searchable.
hasTags	boolean	Determines if the multi-select has tags instead of "_ out of _ selected" text.	Default is "false". When "true" the multi-select shows the selected options with tags. When "false" the multi-select shows the selected options with "_ out of _ selected" text.
placeholder	string	The placeholder text for the multi-select.
bindValue	string	Object property to use for selected model.	By default binds to whole object.
bindLabel	string	Object property to use for label.	Default is "label".
maxSelectedItems	number	Sets the total number of options that can be selected at once.
groupBy	string \| Function	Groups the options by a key or a function expression.
selectableGroup	boolean	Determines if the group is selectable when groupBy is used.	Default is "true". When "true" the group is selectable.
selectableGroupAsModel	boolean	Determines if selecting all the children or the group itself.	Default is "false". When "true" the group itself is selected. When "false" the group children are selected.
isDisabled	boolean	Determines if the multi-select is disabled.	Default is "false". When "true" the multi-select is disabled. When disabled, the form control is not editable, and the data will not be submitted.
isReadonly	boolean	Determines if the multi-select is readonly.	Default is "false". When "true" the multi-select is readonly. When readonly, the form control is not editable, and the data will be submitted.
inputAttrs	object	Passes custom attributes to the underlying input element through key:value pairs.
bpID	string	The value for the multi-select's id attribute.	Ids must only be used once per page. Ids should be camelCase, e.g.: #myId. See identifiers.

Internationalization

Multiselect internationalization input
Key	Type	Description	Notes
'+ additional more'	string	The text used for the overflow tag text.	Default is "+ #{additional} more".
'numSelected out of numTotal selected'	string	The text used for the selected placeholder text.	Default is "#{numSelected} out of #{numTotal} selected".
'No items found'	string	The text that displays when search returns no results.	Default is "No items found".

Outputs

Multiselect outputs
Output	Description
ngModel	Exposes the ngModel of the select. Reflects the current selection in the form of an array of the selected values.
valueChange	Whenever the selection is updated, an array of the selected values will be emitted.

Content Projection

The ng-multi-label-tmp and ng-option-tmp attributes are the values for the optional ng-content directives' select attributes.

ng-multi-label-tmp

Used to create a custom placeholder that can utilize the selected items array and clear function.

<bp-multi-select
  label="Label Text"
  ...
>
  <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
    <span>Selected {{ items.length }} items</span>
  </ng-template>
</bp-multi-select>

ng-option-tmp

Used to create a custom template for options. An example use case would be adding icons to statuses. The template replaces content to the right of the checkbox. The option item and index are exposed and can be used.

<bp-multi-select
  label="Label Text"
  ...
>
  <ng-template ng-option-tmp let-item="item" let-index="index">
    <span class="status-icon complete"></span> {{ item }}
  </ng-template>
</bp-multi-select>

Identifiers

Identifiers
ID	Description
`bpID`	The unique identifier for the multi-select component.
`bpID + 'Select'`	The unique identifier for the multi-select.