open-vault/ui/lib/core/stories/search-select.md

SearchSelect

The SearchSelect is an implementation of the ember-power-select used for form elements where options come dynamically from the API.

Params

Param	Type	Default	Description
id	string		The name of the form field
models	Array		An array of model types to fetch from the API.
onChange	function		The onchange action for this form field.
inputValue	string | Array		A comma-separated string or an array of strings.
label	string		Label for this form field
fallbackComponent	string		name of component to be rendered if the API call 403s
[backend]	string		name of the backend if the query for options needs additional information (eg. secret backend)
[disallowNewItems]	boolean	false	Controls whether or not the user can add a new item if none found
[helpText]	string		Text to be displayed in the info tooltip for this form field
[selectLimit]	number		A number that sets the limit to how many select options they can choose
[subText]	string		Text to be displayed below the label
[subLabel]	string		a smaller label below the main Label
[wildcardLabel]	string		when you want the searchSelect component to return a count on the model for options returned when using a wildcard you must provide a label of the count e.g. role. Should be singular.
options	Array		Advanced usage - options can be passed directly from the outside to the power-select component. If doing this, models should not also be passed as that will overwrite the passed value.
search	function		Advanced usage - Customizes how the power-select component searches for matches - see the power-select docs for more information.

Example

<SearchSelect @id="group-policies" @models={{["policies/acl"]}} @onChange={{onChange}} @selectLimit={{2}} @inputValue={{get model valuePath}} @helpText="Policies associated with this group" @label="Policies" @fallbackComponent="string-list" />

See

• Uses of SearchSelect
• SearchSelect Source Code

---