# Combobox
A pure HTML and vanilla JS implementation of ZagJS Combobox
A combobox is an input widget with an associated popup that enables users to select a value from a collection of possible values.
# Anatomy
The combobox component consists of the following data parts:
root, label, control, title, input, clear-trigger, trigger, positioner, content, item
data-label is required on all data-part="item" in order to be used for the input value
An optional data-value and can be added to each data-part="item", this is useful when using the API or setting default values.
<div class="combobox-js combobox" data-placeholder="Type or select currency">
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
# Load from JSON
You can initialize the Combobox component by embedding your JSON data directly in your HTML using a <script> tag with type="application/json" and a unique data-combobox attribute. Then, reference this JSON in your Combobox container via the corresponding data-json attribute.
<script type="application/json" data-combobox="countries">
{
"id": "countries",
"name": "Countries",
"children": [
{
"id": "western-europe",
"name": "Western Europe",
"children": [
{ "id": "FR", "name": "France" },
{ "id": "BE", "name": "Belgium" },
{ "id": "DE", "name": "Germany" },
{ "id": "NL", "name": "Netherlands" },
{ "id": "CH", "name": "Switzerland" },
{ "id": "AT", "name": "Austria" }
]
},
{
"id": "southern-europe",
"name": "Southern Europe",
"children": [
{ "id": "IT", "name": "Italy" },
{ "id": "ES", "name": "Spain" },
{ "id": "PT", "name": "Portugal" },
{ "id": "GR", "name": "Greece" }
]
},
{
"id": "central-europe",
"name": "Central Europe",
"children": [
{ "id": "PL", "name": "Poland" },
{ "id": "CZ", "name": "Czech Republic" },
{ "id": "HU", "name": "Hungary" }
]
}
]
}
</script>
<div
class="combobox-js combobox"
data-json="countries"
data-placeholder="Type or select country"
>
<div data-part="root">
<label data-part="label">Your Country</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar scrollbar--sm"></ul>
</div>
</div>
</div>
# Group Items
The Combobox items can be grouped with a label to identify each group
An optional data-id can be added to each data-part="item-group" and data-part="item-group-label", this is useful when using the API or setting default values.
To use the data-part="item-group-label" outside of the group, useful for styling, you must provide the same data-id for the group and label.
- US Dollar
- Euro
- British Pound
- Japanese Yen
- Indian Rupee
-
Bitcoin
-
Ether
-
Ether
Currency
Crypto
<div class="combobox-js combobox" data-placeholder="Type or select currency">
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<div data-part="item-group">
<div data-part="item-group-label">Currency</div>
<li data-part="item" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</div>
<div data-part="item-group">
<div data-part="item-group-label">Crypto</div>
<li data-part="item" data-label="Bitcoin">
<img src="/images/currency/btc.png" alt="BTC" />
Bitcoin
</li>
<li data-part="item" data-label="Ether">
<img src="/images/currency/eth.png" alt="ETH" />
Ether
</li>
<li data-part="item" data-label="USDT">
<img src="/images/currency/usdt.png" alt="USDT" />
Ether
</li>
</div>
</ul>
</div>
</div>
</div>
# Custom Values
The Combobox items and groups can use custom values and ids, this is useful when using the API or setting default values.
data-value can be added to each data-part="item"
- US Dollar
- Euro
- British Pound
- Japanese Yen
- Indian Rupee
-
Bitcoin
-
Ether
-
Ether
Currency
Crypto
<div class="combobox-js combobox" data-placeholder="Type or select currency">
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<div data-part="item-group-label" data-id="currency">Currency</div>
<div data-part="item-group" data-id="currency">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</div>
<div data-part="item-group-label" data-id="currency">Crypto</div>
<div data-part="item-group" data-id="currency">
<li data-part="item" data-value="BTC" data-label="Bitcoin">
<img src="/images/currency/btc.png" alt="BTC" />
Bitcoin
</li>
<li data-part="item" data-value="ETH" data-label="Ether">
<img src="/images/currency/eth.png" alt="ETH" />
Ether
</li>
<li data-part="item" data-value="USDT" data-label="USDT">
<img src="/images/currency/usdt.png" alt="USDT" />
Ether
</li>
</div>
</ul>
</div>
</div>
</div>
# Data attributes
Each combobox can be set with different settings with the following data-attribute.
id
Type: string
Description: The unique id of the component. Default generated if none is provided.
data-json
Type: string
Description: The name of the collection loaded as an inline script.
data-name
Type: string
Description: The name attribute of the combobox's input. Useful for form submission.
data-form
Type: string
Description: The associated form of the combobox.
data-open
Type: boolean
Description: The controlled open state of the combobox.
data-default-open
Type: boolean
Description: The initial open state of the combobox when rendered. Use when you don't need to control the open state of the combobox.
data-open-on-click
Type: boolean
Description: Whether to open the combobox popup on initial click on the input.
data-open-on-change
Type: boolean
Description: Whether to show the combobox when the input value changes.
data-close-on-select
Type: boolean
Description: Whether to close the combobox when an item is selected.
data-disable-layer
Type: boolean
Description: Whether to disable registering this as a dismissable layer.
data-input-value
Type: string
Description: The controlled value of the combobox's input.
data-default-input-value
Type: string
Description: The initial value of the combobox's input when rendered. Use when you don't need to control the value of the combobox's input.
data-placeholder
Type: string
Description: The placeholder text of the combobox's input.
data-allow-custom-value
Type: boolean
Description: Whether to allow typing custom values in the input.
data-highlighted-value
Type: string
Description: The controlled highlighted value of the combobox.
data-default-highlighted-value
Type: string
Description: The initial highlighted value of the combobox when rendered. Use when you don't need to control the highlighted value of the combobox.
data-value
Type: string list
Description: The controlled value of the combobox's selected items.
data-default-value
Type: string list
Description: The initial value of the combobox's selected items when rendered. Use when you don't need to control the value of the combobox's selected items.
data-selection-behavior
Type: "clear" | "replace" | "preserve"
Description: The behavior of the combobox input when an item is selected.
replace: The selected item string is set as the input valueclear: The input value is clearedpreserve: The input value is preserved
data-multiple
Type: boolean
Description: Whether to allow multiple selection.
Good to know: When multiple is true, the selectionBehavior is automatically set to clear. It is recommended to render the selected items in a separate container.
data-input-behavior
Type: "autohighlight" | "autocomplete" | "none"
Description: Defines the auto-completion behavior of the combobox.
autohighlight: The first focused item is highlighted as the user typesautocomplete: Navigating the listbox with the arrow keys selects the item and the input is updated
data-loop-focus
Type: boolean
Description: Whether to loop the keyboard navigation through the items.
data-auto-focus
Type: boolean
Description: Whether to autofocus the input on mount.
data-composite
Type: boolean
Description: Whether the combobox is composed with other composite widgets like tabs.
data-dir
Type: "ltr" | "rtl"
Description: The orientation of the combobox. Can be ltr or rtl.
data-disabled
Type: boolean
Description: Whether the combobox is disabled.
data-read-only
Type: boolean
Description: Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it.
data-invalid
Type: boolean
Description: Whether the combobox is invalid.
data-required
Type: boolean
Description: Whether the combobox is required.
# Event Callbacks
Each combobox component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the combobox and a event listener for your event name
document
.getElementById("my-combobox")
?.addEventListener("my-combobox-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
<div
id="my-combobox"
class="combobox-js combobox"
data-placeholder="Type or select currency"
data-on-input-value-change="my-combobox-event"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
Open your browser's console to see the events received when the input value changes
data-on-input-value-change
Type: string
Description: Event name to send when the input's value changes.
data-on-value-change
Type: string
Description: Event name to send when a new item is selected.
data-on-highlight-change
Type: string
Description: Event name to send when an item is highlighted using the pointer or keyboard navigation.
data-on-select
Type: string
Description: Event name to send when an item is selected.
data-on-open-change
Type: string
Description: Event name to send when the popup is opened.
data-on-pointerdown-outside
Type: string
Description: Event name to send when the pointer is pressed down outside the component.
data-on-focus-outside
Type: string
Description: Event name to send when the focus is moved outside the component.
data-on-interact-outside
Type: string
Description: Event name to send when an interaction happens outside the component.
# Form usage
Combobox can be used inside a form
You must set the id of the form and the name of the Combobox
data-form="form-id"
data-name="combobox-name"
<form id="my-form" class="flex flex-col items-center gap-(--spacing-ui-gap)">
<div
class="combobox-js combobox"
data-form="my-form"
data-name="currency"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
<button class="button button--accent" type="submit">Submit</button>
</form>
<div id="result"></div>
You can use the results from the form as you wish
const formCurrency = document.getElementById(
"my-form",
) as HTMLFormElement | null;
const resultCurrency = document.getElementById(
"result",
) as HTMLDivElement | null;
if (formCurrency && resultCurrency) {
formCurrency.addEventListener("submit", (e: Event) => {
e.preventDefault();
const formData = new FormData(formCurrency);
const currency = (formData.get("currency") as string) || "none";
resultCurrency.textContent = `Submitted currency: ${currency}`;
});
}
# Modifiers
Combobox support modifier classes that control their appearance.
You can combine multiple modifiers on the same combobox.
The default modifier is applied automatically, so you don’t need to include it explicitly.
| Modifier | Description |
|---|---|
| Color | Sets the color theme of the combobox. |
| Size | Adjusts the overall size of the combobox. |
You may have noticed the double dash before the modifier name — this follows the BEM (Block Element Modifier) naming convention
# Color
Use class="combobox--{color}" to set the color of an combobox.
Available options:
accent(default), brand, alert, info, success
<div
class="combobox-js combobox combobox--brand"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
<div
class="combobox-js combobox combobox--alert"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
<div
class="combobox-js combobox combobox--info"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
<div
class="combobox-js combobox combobox--success"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
# Size
Use class="combobox--{size}" to set the size of an combobox.
Available options:
sm, md (default), lg, xl
<div
class="combobox-js combobox combobox--sm"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
<div class="combobox-js combobox" data-placeholder="Type or select currency">
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
<div
class="combobox-js combobox combobox--lg"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
<div
class="combobox-js combobox combobox--xl"
data-placeholder="Type or select currency"
>
<div data-part="root">
<label data-part="label">Your Currency</label>
<div data-part="control">
<input data-part="input" />
<button data-part="clear-trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
></path>
</svg>
</button>
<button data-part="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
></path>
</svg>
</button>
</div>
<div data-part="positioner">
<ul data-part="content" class="scrollbar">
<li data-part="item" data-value="USD" data-label="US Dollar">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
US Dollar
</li>
<li data-part="item" data-value="EURO" data-label="Euro">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 1 0 0 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Euro
</li>
<li data-part="item" data-value="GBP" data-label="British Pound">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.121 7.629A3 3 0 0 0 9.017 9.43c-.023.212-.002.425.028.636l.506 3.541a4.5 4.5 0 0 1-.43 2.65L9 16.5l1.539-.513a2.25 2.25 0 0 1 1.422 0l.655.218a2.25 2.25 0 0 0 1.718-.122L15 15.75M8.25 12H12m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
British Pound
</li>
<li data-part="item" data-value="YEN" data-label="Japanese Yen">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m9 7.5 3 4.5m0 0 3-4.5M12 12v5.25M15 12H9m6 3H9m12-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Japanese Yen
</li>
<li data-part="item" data-value="AL" data-label="Indian Rupee">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
></path>
</svg>
Indian Rupee
</li>
</ul>
</div>
</div>
</div>
# Installation
First, complete the Corex UI initial installation guide for your platform, bundler, or framework.
- Import the component
import "@corex-ui/static/components/combobox";
This will automatically initialize all elements with class="combobox-js" and add the necessary interaction behavior.
- Add styling
The component is unstyled by default for maximum customization flexibility.
To apply the default Corex UI design system styles, import the stylesheet:
@import "@corex-ui/design/components/combobox.css";
These styles will be applied to all elements with the combobox class.