Examples
Basic usage
Find your favorite ember repository on Github
Disabled Select Search
ember-common-ui
Select Search with Error
Please select a repository
Properties
| Name | Type | Required | Description |
|---|---|---|---|
| @validationField | string | Yes | The field name in the changeset to validate |
| @changeset | Changeset | Yes | The changeset instance containing the form data and validation logic |
| @options | Array | Yes | An array of selectable options that will be displayed in the dropdown. Each option should have a toString() method for display |
| @onSearch | function | Yes | A function or ember-concurrency task that handles search logic. Receives the search term as a parameter and should return filtered options. Use with (perform this.onSearch) when using tasks |
| @label | string | No | Optional label text displayed above the select field |
| @placeholder | string | No | Placeholder text displayed when no option is selected |
| @disabled | boolean | No | Boolean flag to disable the select input, preventing user interaction |
| @multiple | boolean | No | Enables multi-select mode allowing selection of multiple options |
| @initiallyOpened | boolean | No | Opens the dropdown automatically when the component is rendered |
| @mandatory | boolean | No | If true, requires a value to be selected, affecting validation behavior |
| @allowClear | boolean | No | Shows a clear button to remove the selected value when enabled |
| @onChange | function | No | Callback function triggered when the selection changes, receives the new selected value(s) |
| @labelComponent | Component | No | Custom component to render the label, allowing full customization of label appearance |
| @selectedItemComponent | Component | No | Custom component to render the selected item in the trigger, providing control over how selections are displayed |
| @placeholderComponent | Component | No | Custom component to render when no selection is made, replacing default placeholder text |
| @searchPlaceholder | string | No | Placeholder text displayed in the search input field |
| @searchMessage | string | No | Message displayed while user is typing in the search field |
| @loadingMessage | string | No | Message displayed while search results are being loaded (useful for async searches) |
| @noMatchesMessage | string | No | Message displayed when the search returns no matching results |