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

External CSS

  1. https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css
  2. https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js