<div class="wrapper">
	<select data-rich-select multiple>
		<option value="">選択してください</option>
	</select>
</div>
.wrapper {
  margin: 3rem;
}
new TomSelect(
	'[data-rich-select]',
	{
		valueField: 'value',
		labelField: 'label',
		searchField: 'label',
		options: [
			{ group: 'front', value: 'html', label: 'HTML' },
			{ group: 'front', value: 'css', label: 'CSS' },
			{ group: 'front', value: 'javascript', label: 'JavaScript' },
			{ group: 'front', value: 'typescript', label: 'TypeScript' },
			{ group: 'back', value: 'nodejs', label: 'Node JS' },
			{ group: 'back', value: 'php', label: 'PHP' },
		],
		optgroups: [
			{ value: 'front', label: 'フロントエンド' },
			{ value: 'back', label: 'バックエンド' },
		],
		optgroupField: 'group'
	}
)

External CSS

  1. https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css
  2. https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.bootstrap5.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js