kit

Multi-value picker

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Multi-value picker

  • Urgent
  • Warranty
  • Urgent
  • Warranty
  • Repeat customer
  • Awaiting parts
  • New label
Urgent, Warranty Labels help you find this job later.
Cannot be changed
  • Urgent
  • Warranty
  • Urgent
  • Warranty
  • Repeat customer
  • Awaiting parts
  • New label
Urgent, Warranty Only the owner can change this.
Source
<div data-kit-role="form-group" data-kit-holds="help" id="labels">
  <label for="labels-control" id="labels-label">Labels</label>
  <div data-kit-role="multi-value-picker" id="labels-control-multi-value-picker">
    <div data-kit-region="control">
      <ul data-kit-region="chips">
        <li data-kit-region="chip" tabindex="-1"><span>Urgent</span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Urgent"><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="labels[]" value="Urgent"></li>
        <li data-kit-region="chip" tabindex="-1"><span>Warranty</span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Warranty"><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="labels[]" value="Warranty"></li>
      </ul>
      <template data-kit-region="chip"><li data-kit-region="chip" tabindex="-1"><span></span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove"><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="labels[]" value=""></li></template>
      <input id="labels-control" type="text" role="combobox" aria-describedby="labels-help" aria-autocomplete="list" aria-expanded="false" aria-controls="labels-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <ul id="labels-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-multiselectable="true" aria-labelledby="labels-label">
        <li id="labels-control-match-l-urgent" role="option" aria-selected="true" data-value="Urgent"><input type="checkbox" aria-labelledby="labels-control-match-l-urgent-name" data-kit-role="selection-control" tabindex="-1" checked><span id="labels-control-match-l-urgent-name" data-kit-region="match-name">Urgent</span></li>
        <li id="labels-control-match-l-warranty" role="option" aria-selected="true" data-value="Warranty"><input type="checkbox" aria-labelledby="labels-control-match-l-warranty-name" data-kit-role="selection-control" tabindex="-1" checked><span id="labels-control-match-l-warranty-name" data-kit-region="match-name">Warranty</span></li>
        <li id="labels-control-match-l-repeat" role="option" aria-selected="false" data-value="Repeat customer"><input type="checkbox" aria-labelledby="labels-control-match-l-repeat-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-control-match-l-repeat-name" data-kit-region="match-name">Repeat customer</span></li>
        <li id="labels-control-match-l-parts" role="option" aria-selected="false" data-value="Awaiting parts"><input type="checkbox" aria-labelledby="labels-control-match-l-parts-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-control-match-l-parts-name" data-kit-region="match-name">Awaiting parts</span></li>
        <li id="labels-control-new" role="option" data-kit-region="new"><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 label <q></q></li>
      </ul>
    </div>
  </div>
  <output for="labels-control">Urgent, Warranty</output>
  <span data-kit-region="help" id="labels-help">Labels help you find this job later.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="labels-disabled">
<label for="labels-disabled-control" id="labels-disabled-label">Labels</label>
<div data-kit-role="multi-value-picker" id="labels-disabled-control-multi-value-picker">
  <div data-kit-region="control">
    <ul data-kit-region="chips">
      <li data-kit-region="chip" tabindex="-1"><span>Urgent</span><button disabled type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Urgent"><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="labels[]" value="Urgent"></li>
      <li data-kit-region="chip" tabindex="-1"><span>Warranty</span><button disabled type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Warranty"><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="labels[]" value="Warranty"></li>
    </ul>
    <template data-kit-region="chip"><li data-kit-region="chip" tabindex="-1"><span></span><button disabled type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove"><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="labels[]" value=""></li></template>
    <input disabled id="labels-disabled-control" type="text" role="combobox" aria-describedby="labels-disabled-help" aria-autocomplete="list" aria-expanded="false" aria-controls="labels-disabled-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
    <ul id="labels-disabled-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-multiselectable="true" aria-labelledby="labels-disabled-label">
      <li id="labels-disabled-control-match-l-urgent" role="option" aria-selected="true" data-value="Urgent"><input disabled type="checkbox" aria-labelledby="labels-disabled-control-match-l-urgent-name" data-kit-role="selection-control" tabindex="-1" checked><span id="labels-disabled-control-match-l-urgent-name" data-kit-region="match-name">Urgent</span></li>
      <li id="labels-disabled-control-match-l-warranty" role="option" aria-selected="true" data-value="Warranty"><input disabled type="checkbox" aria-labelledby="labels-disabled-control-match-l-warranty-name" data-kit-role="selection-control" tabindex="-1" checked><span id="labels-disabled-control-match-l-warranty-name" data-kit-region="match-name">Warranty</span></li>
      <li id="labels-disabled-control-match-l-repeat" role="option" aria-selected="false" data-value="Repeat customer"><input disabled type="checkbox" aria-labelledby="labels-disabled-control-match-l-repeat-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-disabled-control-match-l-repeat-name" data-kit-region="match-name">Repeat customer</span></li>
      <li id="labels-disabled-control-match-l-parts" role="option" aria-selected="false" data-value="Awaiting parts"><input disabled type="checkbox" aria-labelledby="labels-disabled-control-match-l-parts-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-disabled-control-match-l-parts-name" data-kit-region="match-name">Awaiting parts</span></li>
      <li id="labels-disabled-control-new" role="option" data-kit-region="new"><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 label <q></q></li>
    </ul>
  </div>
</div>
<output for="labels-disabled-control">Urgent, Warranty</output>
<span data-kit-region="help" id="labels-disabled-help">Only the owner can change this.</span>
</div>

Multi-value picker, open

Show it open

Source
<div data-kit-role="form-group" id="labels-recent">
  <label for="labels-recent-control" id="labels-recent-label">Labels</label>
  <div data-kit-role="multi-value-picker" id="labels-recent-control-multi-value-picker">
    <div data-kit-region="control">
      <ul data-kit-region="chips">
        <li data-kit-region="chip" tabindex="-1"><span>Urgent</span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Urgent"><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="labels[]" value="Urgent"></li>
      </ul>
      <template data-kit-region="chip"><li data-kit-region="chip" tabindex="-1"><span></span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove"><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="labels[]" value=""></li></template>
      <input id="labels-recent-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="labels-recent-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <ul id="labels-recent-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-multiselectable="true" aria-labelledby="labels-recent-label">
        <li id="labels-recent-control-match-l-urgent" role="option" aria-selected="true" data-value="Urgent"><input type="checkbox" aria-labelledby="labels-recent-control-match-l-urgent-name" data-kit-role="selection-control" tabindex="-1" checked><span id="labels-recent-control-match-l-urgent-name" data-kit-region="match-name">Urgent</span></li>
        <li id="labels-recent-control-match-l-warranty" role="option" aria-selected="false" data-value="Warranty"><input type="checkbox" aria-labelledby="labels-recent-control-match-l-warranty-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-recent-control-match-l-warranty-name" data-kit-region="match-name">Warranty</span></li>
        <li id="labels-recent-control-match-l-repeat" role="option" aria-selected="false" data-value="Repeat customer"><input type="checkbox" aria-labelledby="labels-recent-control-match-l-repeat-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-recent-control-match-l-repeat-name" data-kit-region="match-name">Repeat customer</span></li>
        <li id="labels-recent-control-match-l-parts" role="option" aria-selected="false" data-value="Awaiting parts"><input type="checkbox" aria-labelledby="labels-recent-control-match-l-parts-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-recent-control-match-l-parts-name" data-kit-region="match-name">Awaiting parts</span></li>
        <li id="labels-recent-control-new" role="option" data-kit-region="new"><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 label <q></q></li>
      </ul>
    </div>
  </div>
  <output for="labels-recent-control">Urgent</output>
</div>

Multi-value picker, matches

Show it open

Source
<div data-kit-role="form-group" id="labels-matches">
  <label for="labels-matches-control" id="labels-matches-label">Labels</label>
  <div data-kit-role="multi-value-picker" id="labels-matches-control-multi-value-picker">
    <div data-kit-region="control">
      <ul data-kit-region="chips">
        <li data-kit-region="chip" tabindex="-1"><span>Urgent</span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Urgent"><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="labels[]" value="Urgent"></li>
        <li data-kit-region="chip" tabindex="-1"><span>Warranty</span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Warranty"><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="labels[]" value="Warranty"></li>
      </ul>
      <template data-kit-region="chip"><li data-kit-region="chip" tabindex="-1"><span></span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove"><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="labels[]" value=""></li></template>
      <input id="labels-matches-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="labels-matches-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <ul id="labels-matches-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-multiselectable="true" aria-labelledby="labels-matches-label">
        <li id="labels-matches-control-match-l-warranty" role="option" aria-selected="true" data-value="Warranty"><input type="checkbox" aria-labelledby="labels-matches-control-match-l-warranty-name" data-kit-role="selection-control" tabindex="-1" checked><span id="labels-matches-control-match-l-warranty-name" data-kit-region="match-name"><mark>Wa</mark>rranty</span></li>
        <li id="labels-matches-control-match-l-parts" role="option" aria-selected="false" data-value="Awaiting parts"><input type="checkbox" aria-labelledby="labels-matches-control-match-l-parts-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-matches-control-match-l-parts-name" data-kit-region="match-name">A<mark>wa</mark>iting parts</span></li>
        <li id="labels-matches-control-match-l-waste" role="option" aria-selected="false" data-value="Waste collection"><input type="checkbox" aria-labelledby="labels-matches-control-match-l-waste-name" data-kit-role="selection-control" tabindex="-1"><span id="labels-matches-control-match-l-waste-name" data-kit-region="match-name"><mark>Wa</mark>ste collection</span></li>
        <li id="labels-matches-control-new" role="option" data-kit-region="new"><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 label <q></q></li>
      </ul>
    </div>
  </div>
  <output for="labels-matches-control">Urgent, Warranty</output>
</div>

Multi-value picker, tags

  • Regular
  • Harbourside Community Association Youth Theatre and Drama Club rehearsals
  • Regular
  • Wedding
  • Needs parking
  • Harbourside Community Association Youth Theatre and Drama Club rehearsals
  • New tag
Regular, Harbourside Community Association Youth Theatre and Drama Club rehearsals
Source
<div data-kit-role="form-group" id="tags">
  <label for="tags-control" id="tags-label">Tags</label>
  <div data-kit-role="multi-value-picker" id="tags-control-multi-value-picker">
    <div data-kit-region="control">
      <ul data-kit-region="chips">
        <li data-kit-region="chip" tabindex="-1"><span data-kit-role="tag" style="--kit-tag: #27ae60"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Regular</span></span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Regular"><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="tags[]" value="t-regular"></li>
        <li data-kit-region="chip" tabindex="-1"><span data-kit-role="tag" style="--kit-tag: #c0392b"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Harbourside Community Association Youth Theatre and Drama Club rehearsals</span></span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove Harbourside Community Association Youth Theatre and Drama Club rehearsals"><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="tags[]" value="t-drama"></li>
      </ul>
      <template data-kit-region="chip"><li data-kit-region="chip" tabindex="-1"><span data-kit-role="tag"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name"></span></span><button type="button" data-kit-role="icon-action" data-kit-region="remove" tabindex="-1" aria-label="Remove"><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="tags[]" value=""></li></template>
      <input id="tags-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="tags-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
      <ul id="tags-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-multiselectable="true" aria-labelledby="tags-label">
          <li id="tags-control-match-t-regular" role="option" aria-selected="true" data-value="t-regular"><input type="checkbox" aria-labelledby="tags-control-match-t-regular-name" data-kit-role="selection-control" tabindex="-1" checked><span id="tags-control-match-t-regular-name" data-kit-role="tag" style="--kit-tag: #27ae60"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Regular</span></span></li>
          <li id="tags-control-match-t-wedding" role="option" aria-selected="false" data-value="t-wedding"><input type="checkbox" aria-labelledby="tags-control-match-t-wedding-name" data-kit-role="selection-control" tabindex="-1"><span id="tags-control-match-t-wedding-name" data-kit-role="tag" style="--kit-tag: #8e44ad"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Wedding</span></span></li>
          <li id="tags-control-match-t-parking" role="option" aria-selected="false" data-value="t-parking"><input type="checkbox" aria-labelledby="tags-control-match-t-parking-name" data-kit-role="selection-control" tabindex="-1"><span id="tags-control-match-t-parking-name" data-kit-role="tag" style="--kit-tag: #d35400"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Needs parking</span></span></li>
          <li id="tags-control-match-t-drama" role="option" aria-selected="true" data-value="t-drama"><input type="checkbox" aria-labelledby="tags-control-match-t-drama-name" data-kit-role="selection-control" tabindex="-1" checked><span id="tags-control-match-t-drama-name" data-kit-role="tag" style="--kit-tag: #c0392b"><span data-kit-region="dot" aria-hidden="true"></span><span data-kit-region="name">Harbourside Community Association Youth Theatre and Drama Club rehearsals</span></span></li>
        <li id="tags-control-new" role="option" data-kit-region="new"><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 tag <q></q></li>
      </ul>
    </div>
  </div>
  <output for="tags-control">Regular, Harbourside Community Association Youth Theatre and Drama Club rehearsals</output>
</div>