playground / github

Install:

<script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"></script>

this extention relies on htmx and tom-select.js being loaded before it is included:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/htmx.org@latest">
        <link href="https://unpkg.com/tom-select@latest/dist/css/tom-select.css" rel="stylesheet" />
        <script src="https://unpkg.com/tom-select@latest/dist/js/tom-select.complete.min.js">
        <script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"/>
    </head>
    <body>
        <select hx-ext="tomselect">
            <option value="">Select an option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </body>
</html>

Input

allow creating new items and selecting multiple items

<select 
  hx-ext="tomselect"
  ts-create="true"
  ts-remove-button-title="true"
  multiple
>
    <option value="">N/A</option>
    <option selected value="1">Option 1</option>
    <option selected value="2">Option 2</option>
    <option selected value="3">Option 3</option>
    <option selected value="4">Option 4</option>
    <option selected value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
    <option value="8">Option 8</option>
    <option value="9">Option 9</option>
</select>

Customisable

<select
    hx-ext="tomselect" 
    ts-item-class="text-3xl py-3"
    ts-option-class="text-3xl w-full py-3 bg-red-100"
    ts-item-class="text-3xl py-3"
    multiple
>
    <option value="">Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    ...
</select>

Configure:

Config Options are prefixed with a `ts-` and generally match TomSelect config options The full list of currently support attributes is:

(can expand to other options request):

If a non-valid key is found on an element a warning will be logged to the console and a `tom-select-warning` attribute added to the <select> tag

After processing, one of three attributes will be added to each select box:

<select tom-select-success="true">
 <select tom-select-warning="could not find tag 'example'"> - non-breaking error (e.g. tag name is not recognized)
 <select tom-select-error="TomSelect was not found"> - Breaking error

hx-oob swaps works too

<button 
    hx-get="another-place.html"
    hx-trigger="click"
>(Click to dynamically load options)</button>

Create + Regex new item names

allow creating new items - try typing below - ts-create-filter="true" will prevent commas in the title, any other string will be used as a regex match

<select 
    hx-ext="tomselect"
    ts-max-items="10"
    ts-create-filter="^[^,]*$"
>
    <option value="">Select an option</option>
    <option value="1">ValidOption</option>
</select>

Configuring Item Deletion Confirmation

Supports a custom message or `true` for default text

<select 
    hx-ext="tomselect" 
    ts-remove-button-title="This DELETES THE ITEM!!"
    ts-delete-confirm="ARE YOU SURE!?!"
    multiple
>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

Create + POST request

type to add a new option > Click 'Add [New Item]' > see the network tab for POST request

<select
    hx-ext="tomselect"
    ts-create-filter="true"
    ts-no-active="true"
    ts-add-post-url="/this-could-be-your-new-thing-api"
    ts-persist="true"
    multiple
>
    <option value="">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>