{{#if this.shouldUseFallback}}
  {{component
    this.fallbackComponent
    label=(or this.label this.subLabel)
    subText=this.subText
    onChange=(action "onChange")
    inputValue=this.inputValue
    helpText=this.helpText
    placeHolder=this.placeHolder
    id=this.id
  }}
{{else}}
  {{#if this.label}}
    <label for={{this.id}} class={{if this.labelClass this.labelClass "title is-4"}} data-test-field-label>
      {{this.label}}
      {{#if this.helpText}}
        <InfoTooltip>{{this.helpText}}</InfoTooltip>
      {{/if}}
    </label>
  {{/if}}
  {{#if this.subLabel}}
    <p class="is-label">{{this.subLabel}}</p>
  {{/if}}
  {{#if this.subText}}
    <p class="sub-text">{{this.subText}}</p>
  {{/if}}
  {{! template-lint-configure simple-unless "warn" }}
  {{#unless (gte this.selectedOptions.length this.selectLimit)}}
    <PowerSelect
      @eventType="click"
      @placeholder={{this.placeholder}}
      @searchEnabled={{true}}
      @search={{action "searchAndSuggest"}}
      @options={{this.options}}
      @onChange={{action "selectOrCreate"}}
      @placeholderComponent={{component "search-select-placeholder"}}
      @verticalPosition="below"
      as |option|
    >
      {{#if this.shouldRenderName}}
        {{option.name}}
        <small class="search-select-list-key" data-test-smaller-id="true">
          {{get option this.idKey}}
        </small>
      {{else}}
        {{option.id}}
      {{/if}}
    </PowerSelect>
  {{/unless}}
  <ul class="search-select-list">
    {{#each this.selectedOptions as |selected index|}}
      <li class="search-select-list-item" data-test-selected-option={{index}}>
        {{#if this.shouldRenderName}}
          {{selected.name}}
          <small class="search-select-list-key" data-test-smaller-id="true">
            {{get selected this.idKey}}
          </small>
        {{else}}
          <div>
            {{selected.id}}
            {{#if this.wildcardLabel}}
              {{#if (is-wildcard-string selected.id)}}
                {{#let (filter-wildcard selected this.allOptions) as |wildcardCount|}}
                  <span class="tag is-light has-text-grey-dark" data-test-count={{wildcardCount}}>
                    includes
                    {{if wildcardCount wildcardCount 0}}
                    {{if (eq wildcardCount 1) this.wildcardLabel (pluralize this.wildcardLabel)}}
                  </span>
                {{/let}}
              {{/if}}
            {{/if}}
          </div>
        {{/if}}
        <div class="control">
          {{#if (and selected.addTooltip @renderInfoTooltip)}}
            <InfoTooltip>
              The item associated with this
              {{to-label this.idKey}}
              may no longer exist.
            </InfoTooltip>
          {{/if}}
          <button
            type="button"
            class="button is-ghost"
            data-test-selected-list-button="delete"
            {{action "discardSelection" selected}}
          >
            <Icon @name="trash" class="has-text-grey" />
          </button>
        </div>
      </li>
    {{/each}}
  </ul>
  {{#if (has-block)}}
    {{yield}}
  {{/if}}
{{/if}}