セレクトとタグ

検索、クリア、グループ、複数選択、タグ作成に対応したカスタム select（bootstrap-select、select2、tagsinput の代替）。キーボードで完全に操作できます。

Select

Select

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Single + search + clear" v-slot="{ id }"><ThlSelect :id="id" v-model="single" :options="countries" searchable clearable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Multiple" v-slot="{ id }"><ThlSelect :id="id" v-model="multi" :options="countries" multiple clearable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Creatable tags" v-slot="{ id }"><ThlSelect :id="id" v-model="tags" :options="tags.map((t) => ({ label: t, value: t }))" multiple creatable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="TagsInput" v-slot="{ id }"><ThlTagsInput :id="id" v-model="tags" /></ThlField></div>
</div>

React

<Select options={countries} value={single} onChange={setSingle} searchable clearable />
<Select options={countries} value={multi} onChange={setMulti} multiple clearable />
<Select options={tagOptions} value={tags} onChange={setTags} multiple creatable />
<TagsInput value={tags} onChange={setTags} />

Angular

<thl-select [(value)]="single" [options]="countries" [searchable]="true" [clearable]="true" />
<thl-select formControlName="countries" [options]="countries" multiple />
<thl-select [(ngModel)]="tags" [options]="tagOptions()" multiple creatable />

API

Select

<ThlSelect> · import { ThlSelect } from '@thl-ui/vue'

Prop	型	デフォルト
modelValue	any	—
options*	array	—
multiple	boolean	—
searchable	boolean	—
clearable	boolean	—
creatable	boolean	—
placeholder	string	—
disabled	boolean	—
id	string	—
max	number	—

イベント: update:modelValuechange

TagsInput

<ThlTagsInput> · import { ThlTagsInput } from '@thl-ui/vue'

Prop	型	デフォルト
modelValue	array	—
placeholder	string	—
id	string	—

イベント: update:modelValue