Record picker

<div data-kit-role="form-group" data-kit-holds="help" id="picker-client">
  <label for="picker-client-control" id="picker-client-label">Client</label>
  <div data-kit-role="record-picker" data-kit-width="medium" id="picker-client-control-record-picker">
    <div data-kit-region="control">
      <input id="picker-client-control" type="text" role="combobox" value="Harbour Dental" aria-describedby="picker-client-help" aria-autocomplete="list" aria-expanded="false" aria-controls="picker-client-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <button type="button" data-kit-role="icon-action" data-kit-region="clear" id="picker-client-control-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
      <input type="hidden" name="client" value="c-104">
      <ul id="picker-client-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="picker-client-label">
        <li id="picker-client-control-match-c-104" role="option" data-value="c-104"><span data-kit-region="match-name">Harbour Dental</span><span data-kit-region="match-fact">Leeds</span></li>
        <li id="picker-client-control-match-c-311" role="option" data-value="c-311"><span data-kit-region="match-name">Northgate Pharmacy</span><span data-kit-region="match-fact">York</span></li>
        <li id="picker-client-control-match-c-052" role="option" data-value="c-052"><span data-kit-region="match-name">Fern &amp; Finch Florists</span><span data-kit-region="match-fact">Harrogate</span></li>
      </ul>
    </div>
  </div>
  <output for="picker-client-control">Harbour Dental</output>
  <span data-kit-region="help" id="picker-client-help">The client this job is billed to.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="picker-client-disabled">
<label for="picker-client-disabled-control" id="picker-client-disabled-label">Client</label>
<div data-kit-role="record-picker" data-kit-width="medium" id="picker-client-disabled-control-record-picker">
  <div data-kit-region="control">
    <input disabled id="picker-client-disabled-control" type="text" role="combobox" value="Harbour Dental" aria-describedby="picker-client-disabled-help" aria-autocomplete="list" aria-expanded="false" aria-controls="picker-client-disabled-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
    <button disabled type="button" data-kit-role="icon-action" data-kit-region="clear" id="picker-client-disabled-control-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
    <input disabled type="hidden" name="client" value="c-104">
    <ul id="picker-client-disabled-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="picker-client-disabled-label">
      <li id="picker-client-disabled-control-match-c-104" role="option" data-value="c-104"><span data-kit-region="match-name">Harbour Dental</span><span data-kit-region="match-fact">Leeds</span></li>
      <li id="picker-client-disabled-control-match-c-311" role="option" data-value="c-311"><span data-kit-region="match-name">Northgate Pharmacy</span><span data-kit-region="match-fact">York</span></li>
      <li id="picker-client-disabled-control-match-c-052" role="option" data-value="c-052"><span data-kit-region="match-name">Fern &amp; Finch Florists</span><span data-kit-region="match-fact">Harrogate</span></li>
    </ul>
  </div>
</div>
<output for="picker-client-disabled-control">Harbour Dental</output>
<span data-kit-region="help" id="picker-client-disabled-help">Only the owner can change this.</span>
</div>

<div data-kit-role="form-group" id="picker-recent">
  <label for="picker-recent-control" id="picker-recent-label">Client</label>
  <div data-kit-role="record-picker" data-kit-width="medium" id="picker-recent-control-record-picker">
    <div data-kit-region="control">
      <input id="picker-recent-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="picker-recent-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <input type="hidden" name="client" value="">
      <ul id="picker-recent-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="picker-recent-label">
        <li id="picker-recent-control-match-c-104" role="option" data-value="c-104"><span data-kit-region="match-name">Harbour Dental</span><span data-kit-region="match-fact">Leeds</span></li>
        <li id="picker-recent-control-match-c-311" role="option" data-value="c-311"><span data-kit-region="match-name">Northgate Pharmacy</span><span data-kit-region="match-fact">York</span></li>
        <li id="picker-recent-control-match-c-052" role="option" data-value="c-052"><span data-kit-region="match-name">Fern &amp; Finch Florists</span><span data-kit-region="match-fact">Harrogate</span></li>
        <li id="picker-recent-control-new" role="option" data-kit-region="new" data-kit-opens="new-client"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>New client <q></q></li>
      </ul>
    </div>
  </div>
  <output for="picker-recent-control">No client chosen</output>
</div>

<div data-kit-role="form-group" id="picker-matches">
  <label for="picker-matches-control" id="picker-matches-label">Client</label>
  <div data-kit-role="record-picker" data-kit-width="medium" id="picker-matches-control-record-picker">
    <div data-kit-region="control">
      <input id="picker-matches-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="picker-matches-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <input type="hidden" name="client" value="">
      <ul id="picker-matches-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="picker-matches-label">
        <li id="picker-matches-control-match-c-104" role="option" data-value="c-104"><span data-kit-region="match-name"><mark>Har</mark>bour Dental</span><span data-kit-region="match-fact">Leeds</span></li>
        <li id="picker-matches-control-match-c-233" role="option" data-value="c-233"><span data-kit-region="match-name"><mark>Har</mark>bour Dental</span><span data-kit-region="match-fact">York</span></li>
        <li id="picker-matches-control-match-c-118" role="option" data-value="c-118"><span data-kit-region="match-name"><mark>Har</mark>borne Vets</span><span data-kit-region="match-fact">Birmingham</span></li>
        <li id="picker-matches-control-match-c-310" role="option" data-value="c-310"><span data-kit-region="match-name"><mark>Har</mark>bourside Physio</span><span data-kit-region="match-fact">Bristol</span></li>
        <li id="picker-matches-control-match-c-087" role="option" data-value="c-087"><span data-kit-region="match-name"><mark>Har</mark>court Joinery</span><span data-kit-region="match-fact">Leeds</span></li>
        <li id="picker-matches-control-match-c-412" role="option" data-value="c-412"><span data-kit-region="match-name"><mark>Har</mark>dwick Farm Shop</span><span data-kit-region="match-fact">Derby</span></li>
        <li id="picker-matches-control-match-c-156" role="option" data-value="c-156"><span data-kit-region="match-name"><mark>Har</mark>low Tyres</span><span data-kit-region="match-fact">Harlow</span></li>
        <li id="picker-matches-control-match-c-199" role="option" data-value="c-199"><span data-kit-region="match-name">S<mark>har</mark>p Studio</span><span data-kit-region="match-fact">Leeds</span></li>
        <li data-kit-region="more">11 more. Keep typing to narrow the list.</li>
        <li id="picker-matches-control-new" role="option" data-kit-region="new" data-kit-opens="new-client"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>New client <q></q></li>
      </ul>
    </div>
  </div>
  <output for="picker-matches-control">No client chosen</output>
</div>

<div data-kit-role="form-group" id="picker-none">
  <label for="picker-none-control" id="picker-none-label">Client</label>
  <div data-kit-role="record-picker" data-kit-width="medium" id="picker-none-control-record-picker">
    <div data-kit-region="control">
      <input id="picker-none-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="picker-none-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <input type="hidden" name="client" value="">
      <ul id="picker-none-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="picker-none-label">
        <li data-kit-region="none">No clients match.</li>
        <li id="picker-none-control-new" role="option" data-kit-region="new" data-kit-opens="new-client"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>New client <q></q></li>
      </ul>
    </div>
  </div>
  <output for="picker-none-control">No client chosen</output>
</div>

<div data-kit-role="form-group" id="picker-matching">
  <label for="picker-matching-control" id="picker-matching-label">Client</label>
  <div data-kit-role="record-picker" data-kit-width="medium" id="picker-matching-control-record-picker">
    <div data-kit-region="control">
      <input id="picker-matching-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="picker-matching-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <input type="hidden" name="client" value="">
      <ul id="picker-matching-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="picker-matching-label" aria-busy="true">
        <li data-kit-region="loading"></li>
        <li id="picker-matching-control-new" role="option" data-kit-region="new" data-kit-opens="new-client"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg>New client <q></q></li>
      </ul>
    </div>
  </div>
  <output for="picker-matching-control">No client chosen</output>
</div>