Skip to content
On this page

NcSelect

Props

Prop nameDescriptionTypeValuesDefault
appendToBodyAppend the dropdown element to the end of the body
and size/position it dynamically.<br/>@see https://vue-select.org/api/props.html#appendtobody
boolean-true
calculatePositionWhen appendToBody is true, this function is responsible for
positioning the drop down list.

If a function is returned from calculatePosition, it will
be called when the drop down list is removed from the DOM.
This allows for any garbage collection you may need to do.<br/>@see https://vue-select.org/api/props.html#calculateposition
func-null
closeOnSelectClose the dropdown when selecting an option<br/>@see https://vue-select.org/api/props.html#closeonselectboolean-true
componentsReplace default vue-select components<br/>@see https://vue-select.org/api/props.html#componentsobject-{
Deselect: {
render: createElement => createElement(Close, {
props: {
size: 20,
fillColor: 'var(--vs-controls-color)',
},
style: {
cursor: 'pointer',
},
}),
}
}
disabledDisable the component<br/>@see https://vue-select.org/api/props.html#disabledboolean-false
filterByCallback to determine if the provided option should
match the current search text. Used to determine
if the option should be displayed.

Defaults to the internal vue-select function documented at the link
below

Enabling userSelect will automatically set this to filter by the
displayName and subtitle properties of the user option object
unless this prop is set explicitly<br/>@see https://vue-select.org/api/props.html#filterby
func-null
inputIdInput element id<br/>@see https://vue-select.org/api/props.html#inputidstring-null
labelKey of the displayed label for object options

Defaults to 'label'

Enabling userSelect will automatically set this to 'displayName'
unless this prop is set explicitly<br/>@see https://vue-select.org/api/props.html#label
string-null
loadingShow the loading icon<br/>@see https://vue-select.org/api/props.html#loadingboolean-false
multipleAllow selection of multiple options<br/>@see https://vue-select.org/api/props.html#multipleboolean-false
noWrapDisable automatic wrapping when selected options overflow the widthboolean-false
optionsArray of options<br/>@see https://vue-select.org/api/props.html#optionsArray<string | number | { [key: string | number]: any }>-[]
placeholderPlaceholder text<br/>@see https://vue-select.org/api/props.html#placeholderstring-''
placementWhen appendToBody is true, this sets the placement of the dropdownstringbottom, top'bottom'
userSelectEnable the user selector with avatars

Objects must contain the data expected by the
NcAvatar component
boolean-false
valueCurrently selected value

The v-model directive may be used for two-way data binding<br/>@see https://vue-select.org/api/props.html#value
string | number | { [key: string | number]: any } | Array<any>-null
Any available prop<br/>@see https://vue-select.org/api/props.html-

Events

Event namePropertiesDescription
All events from https://vue-select.org/api/events.html

Slots

NameDescriptionBindings
nameAny combination of slots from https://vue-select.org/api/slots.html

Description

General purpose multiselect component.

Basic examples

loading...

No wrap example

The noWrap prop is set to true and the max-width of the multiselect parent container is limited to 350px

loading...

User select examples

loading...