qselect.vue

      <q-select
        borderless
        v-model="model"
        clearable
        use-chips
        use-input
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        hint="ex: user.id or user.id.blockstack"
        placeholder="Search Blockstack names"
      >
        <template v-slot:before>
          <q-icon name="search" />
        </template>
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
        <template v-slot:selected-item="scope">
          <q-item>
            <q-item-section avatar>
              <q-avatar>
                <img :src="scope.opt.icon" />
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ scope.opt.label }}</q-item-label>
              <q-item-label caption>{{ scope.opt.id }}</q-item-label>
            </q-item-section>
          </q-item>
        </template>
        <template v-slot:option="scope">
          <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
            <q-item-section avatar>
              <q-avatar size="lg">
                <img :src="scope.opt.icon" />
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label v-html="scope.opt.label"></q-item-label>
            </q-item-section>
          </q-item>
        </template>
      </q-select>

options: [ { label: String, id: String, icon: String(url) } ]

hide-selected: Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non 'multiple' Selects

hide-selected: Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non 'multiple' Selects

Ok so maybe I'm just confused by what I'm seeing. I want this:

How do I replace the input? Is there a slot? or a reference to the input slot? ... From the examples I can only see a select slot.

This worked:

  <q-select
        v-model="model"
        clearable
        :use-input="showInput"
        hide-selection
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        hint="ex: user.id or user.id.blockstack"
        placeholder="Search Blockstack names"
        @input="selectUser"
      >
        <template v-slot:before>
          <q-icon name="search" />
        </template>
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
        <template v-slot:selected-item="scope">
          <q-item v-bind="scope.itemProps">
            <q-item-section avatar>
              <q-avatar>
                <img :src="scope.opt.icon" />
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ scope.opt.label }}</q-item-label>
              <q-item-label caption>{{ scope.opt.id }}</q-item-label>
            </q-item-section>
          </q-item>
        </template>
        <template v-slot:option="scope">
          <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
            <q-item-section avatar>
              <q-avatar size="lg">
                <img :src="scope.opt.icon" />
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label v-html="scope.opt.label"></q-item-label>
            </q-item-section>
          </q-item>
        </template>
      </q-select>

Thanks @Cmacu!