MultiSelect

<div class="aura-field-group">
  <label class="aura-label" id="m-label" for="m">Tags</label>
  <div class="aura-combobox aura-combobox--multi" data-state="closed">
    <span class="aura-chip aura-chip--sm">Apple
      <button type="button" class="aura-chip__remove" aria-label="Remove Apple">
        <svg viewBox="0 0 8 8" aria-hidden="true"><path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>
      </button>
    </span>
    <input id="m" type="text" class="aura-combobox__input" role="combobox" aria-expanded="false"
           aria-controls="m-listbox" aria-autocomplete="list" aria-labelledby="m-label" autocomplete="off" value="" />
    <span class="aura-combobox__chevron" aria-hidden="true"></span>
  </div>
</div>

import { MultiSelect } from '@ilomee/aura-react';

const OPTIONS = [
  { value: 'apple', label: 'Apple' },
  { value: 'pear', label: 'Pear' },
  { value: 'cherry', label: 'Cherry' },
];

/**
 * Повторяет html-сниппет `multi-select`, с которым сравнивают все стеки, — поэтому подпись и чип
 * здесь его, а не подобранные покрасивее. Закрытый и без обёртки для раскладки: открытый список
 * портализуется в `document.body`, где его не видит ничто, читающее панель превью, а обёртка была
 * бы узлом, которого в сниппете нет.
 */
export default function Demo() {
  return <MultiSelect label="Tags" options={OPTIONS} defaultValue={['apple']} />;
}

import { MultiSelect } from '@ilomee/aura-vue';

import { MultiSelect } from '@ilomee/aura-svelte';

import { AuraMultiSelect } from '@ilomee/aura-angular';