Select

A searchable select control with single or multiple values, lazy loading, remote filtering and lookup support.

Import

import { Select } from "@schukai/monster/source/components/form/select.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Introduction

The Monster Select is a searchable selection control for simple dropdowns, remote option lists and complex multi-select workflows. Use it when users need labels, filtering, lazy loading or lookup logic that goes beyond a native <select>.

When to use Select

Use it for local and remote option sets: The control supports inline options, lazy loading, lookup requests and remote filtering.
Use it for single and multiple values: The same component can cover compact dropdowns and richer token-style multi-select cases.
Use it when labels and values differ: Lookup handling keeps selected values readable even when labels must be resolved later.
Do not use it for plain yes/no toggles: For binary choices, a switch or checkbox-style control is usually clearer.

Key Features

Search and filtering: Filter local options or switch to remote filtering when the dataset is too large to preload.
Lazy loading and lookup: Load options on demand and resolve selected values back to labels when initial data is incomplete.
Programmatic control: Configure values, option sources and behavior through documented options instead of custom DOM patches.
Monster-aligned styling: The control integrates into forms while keeping token-based styling and accessibility behavior.

Typical mistakes

Do not mix local lazy loading and remote filtering without a clear server contract. If labels come from the server, make sure lookup configuration is present, otherwise users may only see raw IDs. For static, tiny option sets, a simpler native control may still be enough.

Select With Options

This is a simple select component filled with three options.

You can select one of them. You can also use the keyboard to navigate through the options. Press the Tab key to focus the select component.

Then use the Arrow Down key to open the options. Use the Arrow Up key to navigate to the previous option.

Press the Space key to select the focused option. With the ESC key you can close the options.

Javascript

import '@schukai/monster/source/components/form/select.mjs';


// first we create the select element
const select = document.createElement('monster-select');

// our dataset is an array of objects, each object represents a single country
const dataset = [
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]

// now wie define the mapping for the select element.
// you can use the ${} syntax to reference the properties of the dataset 

// the label template is a string that will be used to generate the label for each option
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')

// the value template is a string that will be used to generate the value for each option
select.setOption('mapping.valueTemplate', '${country-code}')

// now we import the dataset into the select element
select.importOptions(dataset);

// and finally we append the select element to the body
document.body.appendChild(select);<script type="module">import '@schukai/monster/source/components/form/select.mjs';


// first we create the select element
const select = document.createElement('monster-select');

// the label template is a string that will be used to generate the label for each option
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')

// the value template is a string that will be used to generate the value for each option
select.setOption('mapping.valueTemplate', '${country-code}')

// now wie import the dataset into the select element
select.importOptions([
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]);

// and finally we append the select element to the body
document.getElementById('uGh7shox').appendChild(select);</script>

HTML

<div id="uGh7shox">
    
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Select With HTML Options

This is a simple select component filled with three div-options.

In this example, a simple select element with three options is displayed. Unlike the example Select with Options, these options are not added via the importOptions() method, but are defined directly in the HTML code.

The value of the option is the index of the option, starting at 1. This value can be overridden using the attribute data-monster-value.

The label is the entire div container. This allows HTML elements to be used within the options.

30 x ❤

Javascript

/** this example does not use an extra script **/

HTML

<monster-select>

    <!-- This Option has a value of 10 and the label is 10 -->
    <div data-monster-value="10">10</div>

    <!-- This Option has no value and the label is 20, the value will be the index of the option -->
    <!-- In this case, the value will be 2 -->
    <div>20</div>

    <!-- This Option has a value of 30 and the label is 30 -->
    <div data-monster-value="30" style="background-color:red;color:white">30 x <i>❤</i></div>


</monster-select>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Multiple Selection

This example demonstrates how to create a select component with multiple selection. You must only change the type attribute of the select component to checkbox.

Javascript

import '@schukai/monster/source/components/form/select.mjs';


// first we create the select element
const select = document.createElement('monster-select');

// our dataset is an array of objects, each object represents a single country
const dataset = [
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]

// now wie define the mapping for the select element.
// you can use the ${} syntax to reference the properties of the dataset 


// we set the type to checkbox
// the default type is radio (single select)
select.setOption('type', 'checkbox');


// the label template is a string that will be used to generate the label for each option
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')

// the value template is a string that will be used to generate the value for each option
select.setOption('mapping.valueTemplate', '${country-code}')

// now we import the dataset into the select element
select.importOptions(dataset);

// and finally we append the select element to the body
document.body.appendChild(select);<script type="module">import '@schukai/monster/source/components/form/select.mjs';

const select = document.createElement('monster-select');

select.setOption('type', 'checkbox');
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')
select.importOptions([
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]);

document.getElementById('uGh7sh43').appendChild(select);</script>

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Filter

This example demonstrates how to create a select component with a filter. With the filter you can search for options.

Javascript

import '@schukai/monster/source/components/form/select.mjs';


// first we create the select element
const select = document.createElement('monster-select');

// our dataset is an array of objects, each object represents a single country
const dataset = [
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]

// With the filter mode set to options, the select element will filter the options based on the text entered by the user.
select.setOption('filter.mode', 'options');

// This defines the position of the filter. You can set it to either popper or inline.
select.setOption('filter.position', 'popper');

// we set the type to checkbox
// the default type is radio (single select)
select.setOption('type', 'checkbox');


// the label template is a string that will be used to generate the label for each option
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')

// the value template is a string that will be used to generate the value for each option
select.setOption('mapping.valueTemplate', '${country-code}')

// now we import the dataset into the select element
select.importOptions(dataset);

// and finally we append the select element to the body
document.body.appendChild(select);<script type="module">import '@schukai/monster/source/components/form/select.mjs';

const select = document.createElement('monster-select');

select.setOption('type', 'checkbox');
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')

select.setOption('filter.mode', 'options');
select.setOption('filter.position', 'popper');

select.importOptions([
    {
        "name": "United Kingdom",
        "alpha-2": "GB",
        "country-code": "826",
    },
    {
        "name": "Sweden",
        "alpha-2": "SE",
        "country-code": "752",

    },
    {
        "name": "Germany",
        "alpha-2": "DE",
        "country-code": "276",
    }
]);

document.getElementById('uGh7sa17').appendChild(select);</script>

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Fetch Options

In Monster, you can dynamically load options for a <monster-select> control by specifying a url option. This allows the control to fetch options from a remote source, rather than defining them statically in the HTML.

Javascript

import '@schukai/monster/source/components/form/select.mjs';


// first we create the select element
const select = document.createElement('monster-select');

// the url to fetch the options from
select.setOption('url', "/assets/examples/countries.json");

// now wie define the mapping for the select element.
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')

// and finally we append the select element to the body
document.body.appendChild(select);<script type="module">import '@schukai/monster/source/components/form/select.mjs';

const select = document.createElement('monster-select');

select.setOption('url', "/assets/examples/countries.json");
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')
document.getElementById('uGh7sh25').appendChild(select);</script>

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Lazy Load

The lazyload feature is useful when you want to load a list of options only when the user interacts with the control, such as a select dropdown. This is different from loading options immediately when the component is rendered, as shown in the previous example.

Javascript

import '@schukai/monster/source/components/form/select.mjs';


// first we create the select element
const select = document.createElement('monster-select');

// then we set lazyLoad to true and specify the URL to fetch the options from
select.setOption('features.lazyLoad', true);
// and the url to fetch the options from
select.setOption('url', "/assets/examples/countries.json");

// now wie define the mapping for the select element.
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')

// and finally we append the select element to the body
document.body.appendChild(select);<script type="module">import '@schukai/monster/source/components/form/select.mjs';

const select = document.createElement('monster-select');

select.setOption('features.lazyLoad', true);
select.setOption('url', "/assets/examples/countries.json");

select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')

document.getElementById('uGh7sh15').appendChild(select);</script>

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Remote Filter

The advanced feature of Monster <monster-select> control is the remote filtering mode. This allows the control to fetch filtered options from a remote source based on the user’s input in the search field. Unlike the standard fetch or lazy load, options are not loaded initially but only after a search term is entered.

To enable the remote filtering mode, set the filter.mode attribute to remote and provide a url option. The remote filter will be activated when the user enters a value in the search field, and Monster will then fetch matching options from the specified endpoint.

In this example, unfortunately we don't filter the value “not real” to see the effect. To see it, you have to look at the url in the network panel in the developer tools.

Javascript

import '@schukai/monster/source/components/form/select.mjs';<script type="module">import '@schukai/monster/source/components/form/select.mjs';</script>

HTML

<monster-select
        data-monster-option-filter-mode="remote"
        data-monster-option-filter-position="popper"
        data-monster-option-features-lazyload="false"
        data-monster-option-url="/assets/examples/countries.json?q={filter}"
        data-monster-option-mapping-labeltemplate="${name}"
        data-monster-option-mapping-valuetemplate="${id}">
</monster-select>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Server Side Filtering With A Remote URL

In this example, unfortunately we don't filter the value “not real” to see the effect. To see it, you have to look at the url in the network panel in the developer tools.

Javascript

import '@schukai/monster/source/components/form/select.mjs';<script type="module">import '@schukai/monster/source/components/form/select.mjs';</script>

HTML

<monster-select
        data-monster-option-filter-mode="remote"
        data-monster-option-filter-position="popper"
        data-monster-option-features-lazyload="false"
        data-monster-option-url="/assets/examples/countries.json?q={filter}"
        data-monster-option-mapping-labeltemplate="${name}"
        data-monster-option-mapping-valuetemplate="${id}">
</monster-select>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Server Side Filtering With Pagination

In this example, unfortunately we don't filter the value “not real” to see the effect. To see it, you have to look at the url in the network panel in the developer tools.

Javascript

import '@schukai/monster/source/components/form/select.mjs';<script type="module">import '@schukai/monster/source/components/form/select.mjs';</script>

HTML

<monster-select
  data-monster-option-url="/example/?limit=5&page={page}&q={filter}"
  data-monster-option-filter-mode="remote"
  data-monster-option-filter-position="popper"
  data-monster-option-filter-defaultValue=""
  data-monster-option-features-showremoteinfo="true"
  data-monster-option-remoteinfo-url="/example/?limit=1"
  data-monster-option-mapping-currentpage="sys.pagination.currentPage"
  data-monster-option-mapping-valuetemplate="${id}"
  data-monster-option-mapping-labeltemplate="${full_name}"
  data-monster-option-mapping-selector="dataset.*"
  data-monster-option-mapping-objectsperpage="sys.pagination.objectsPerPage"
  data-monster-option-mapping-total="sys.pagination.totalObjects"
>
</monster-select>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Using A Summary Template For Selections

When using multi-select, the default view shows individual badges for each selection. You can switch to a more compact summary view by setting the templateMapping.selected option to the built-in summary template. This is ideal for situations with limited space.

Javascript

import {
  Select,
  getSummaryTemplate,
} from "@schukai/monster/source/components/form/select.mjs";

const select = document.createElement("monster-select");

// Enable multiple selections
select.setOption("type", "checkbox");

// Use the summary template instead of individual badges
select.setOption("templateMapping.selected", getSummaryTemplate());

const countryOptions = [
  { label: "Germany", value: "DE" },
  { label: "United States", value: "US" },
  { label: "France", value: "FR" },
  { label: "Japan", value: "JP" },
];
select.setOption("options", countryOptions);

// Pre-select some values to demonstrate the summary
select.value = "DE,JP,FR";

document.getElementById("container").appendChild(select);<script type="module">import {
  Select,
  getSummaryTemplate,
} from "@schukai/monster/source/components/form/select.mjs";

import { domReady } from "@schukai/monster/source/dom/ready.mjs";

domReady.then(() => {
  const select = document.createElement("monster-select");
  document.getElementById("ooMosh8w").appendChild(select);
  select.setOption("type", "checkbox");
  select.setOption("templateMapping.selected", getSummaryTemplate());
  const countryOptions = [
    { label: "Germany", value: "DE" },
    { label: "United States", value: "US" },
    { label: "France", value: "FR" },
    { label: "Japan", value: "JP" },
  ];
  select.setOption("options", countryOptions);
  select.value = "DE,JP,FR";
});</script>

HTML

<div id="container"></div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

This component is implemented using the Shadow DOM to encapsulate its internal structure and styling. The shadow root ensures that the component's internal elements are isolated from the rest of the webpage, preventing external styles or scripts from affecting its internal layout or behavior.

Shadow DOM and Accessibility

The Shadow DOM restricts direct access to the internal structure of the component. While this encapsulation ensures consistency in the component’s design and functionality, developers cannot directly manipulate or style the internal elements. To maintain accessibility, the component supports features like keyboard navigation, screen readers, and logical focus management.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access, customization is made possible through exported parts. Specific parts of the component are explicitly marked for export, enabling developers to target and style them using CSS.

Available Part Attributes

control: Represents the main control area of the select component, including the trigger and dropdown container.
popper: Targets the dropdown element, which displays the options for selection.
option: Represents individual options within the dropdown list.
inline-filter: Styles the inline input filter for quickly filtering options.
badge: Applies to badges that represent selected options.
remove-badge: Targets the remove icon or button for clearing individual selected options.

Below is an example of how to use the CSS part attributes to customize different sections of the component.


monster-select::part(control) {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
}

monster-select::part(popper) {
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

monster-select::part(option) {
    padding: 6px 12px;
    cursor: pointer;
}

monster-select::part(badge) {
    background-color: #0078d4;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
}

monster-select::part(remove-badge) {
    cursor: pointer;
    margin-left: 4px;
}

Explanation of the Example

monster-select::part(control): Customizes the main control area, adding padding and a border.
monster-select::part(popper): Styles the dropdown container, including its background color and shadow.
monster-select::part(option): Adds padding and hover styles to options within the dropdown.
monster-select::part(badge): Styles badges representing selected options.
monster-select::part(remove-badge): Customizes the appearance of the remove icon/button for badges.

Accessibility

The monster-select component follows accessibility best practices to ensure usability for all users. Features include:

Support for keyboard navigation using Arrow Up, Arrow Down, Enter, and Escape keys.
Screen reader support through proper roles and ARIA attributes for interactive elements.
Logical focus management to ensure smooth navigation through the component's options and filters.

By adhering to these accessibility standards, the monster-select component ensures an inclusive user experience across all devices and assistive technologies.

HTML Structure

<monster-select></monster-select>

JavaScript Initialization

const element = document.createElement('monster-select');
document.body.appendChild(element);

Exported

getSelectionTemplate, getSummaryTemplate, popperElementSymbol, Select

Derived from

CustomControl

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomControl.

Option

Type

Default

Description

toggleEventType

string[]

undefined

Array of DOM event names (e.g., ["click", "touch"]) that toggle the dropdown.

delegatesFocus

boolean

false

If `true`, the element delegates focus to its internal control (e.g., the filter input).

options

array<object>

undefined

Array of option objects `{label, value, visibility?, data?}` for a static option list.

selection

string|string[]

undefined

Initial selected value(s), as a string, comma-separated string, or array of strings.

showMaxOptions

number

Maximum number of visible options before the list becomes scrollable.

type

"radio"|"checkbox"

radio

Selection mode: "radio" for single selection, "checkbox" for multiple selections.

name

string

undefined

Name of the hidden form field for form submission.

url

string|null

URL to dynamically fetch options via HTTP when opening or filtering.

total

number|null

Total number of available options, useful for pagination with remote data.

lookup

object

Configuration for fetching initially selected values.

lookup.url

string|null

URL template with a `${filter}` placeholder to look up selected entries on initialization. Used when `url` is set and either `features.lazyLoad` is active or `filter.mode` is `"remote"`.

lookup.grouping

boolean

false

If `true`, all selected values are fetched in a single request; otherwise, a separate request is sent for each value.

fetch

object

Configuration for HTTP requests via `fetch`.

fetch.redirect

string

error

Fetch redirect mode (e.g., "error", "follow").

fetch.method

string

GET

HTTP method for fetching options (e.g., "GET", "POST").

fetch.mode

string

same-origin

Fetch mode (e.g., "cors", "same-origin").

fetch.credentials

string

same-origin

Credentials policy for fetch (e.g., "include", "same-origin").

string>}

object.<string,

undefined

fetch.headers - HTTP headers to be sent with every request.

labels

object

undefined

Text labels for various states and UI elements.

labels.cannot-be-loaded

string

undefined

Message displayed when options cannot be loaded.

labels.no-options-available

string

undefined

Message displayed when no static options are provided.

labels.click-to-load-options

string

undefined

Prompt to load options when `features.lazyLoad` is enabled.

labels.select-an-option

string

undefined

Placeholder text when no selection has been made.

labels.no-options

string

undefined

Message displayed when no options are available from slots or fetch.

labels.no-options-found

string

undefined

Message displayed when the filter yields no matching options.

labels.summary-text.zero

string

undefined

Pluralization template for zero selected entries (e.g., "No entries selected").

labels.summary-text.one

string

undefined

Pluralization template for one selected entry.

labels.summary-text.other

string

undefined

Pluralization template for multiple selected entries.

features

object

Toggles to enable/disable functionalities.

features.clearAll

boolean

true

Shows a "Clear all" button to reset the selection.

features.clear

boolean

true

Shows a "remove" icon on individual selection badges.

features.lazyLoad

boolean

false

If `true`, options are fetched from the `url` only when the dropdown is first opened. Ignored if `filter.mode` is `"remote"`.

features.closeOnSelect

boolean

false

If `true`, the dropdown closes automatically after a selection is made.

features.emptyValueIfNoOptions

boolean

false

Sets the hidden field's value to empty if no options are available.

features.storeFetchedData

boolean

false

If `true`, the raw fetched data is stored and can be retrieved via `getLastFetchedData()`.

features.useStrictValueComparison

boolean

false

Uses strict comparison (`===`) when matching option values.

features.showRemoteInfo

boolean

true

When `filter.mode === "remote"`, displays an info badge indicating that more options may exist on the server.

remoteInfo

object

Configuration for the remote info display.

remoteInfo.url

string|null

URL to fetch the total count of remote options (used when `filter.mode === "remote"`).

placeholder

object

Placeholder texts for input fields.

placeholder.filter

string

Placeholder text for the filter input field.

filter

object

Configuration for the filtering functionality.

filter.defaultValue

string|null

Default filter value for remote requests. An empty string will prevent the initial request.

filter.mode

"options"|"remote"|"disabled"

undefined

Filter mode: `"options"` (client-side), `"remote"` (server-side, `lazyLoad` is ignored), or `"disabled"`.

filter.position

"inline"|"popper"

undefined

Position of the filter input: `"inline"` (inside the control) or `"popper"` (inside the dropdown).

filter.defaultOptionsUrl

string|null

URL to load an initial list of options when `filter.mode` is `"remote"` and no filter value has been entered.

filter.marker

object

undefined

Markers for embedding the filter value into the `url` for server-side filtering.

filter.marker.open

string

{

Opening marker (e.g., `{`).

filter.marker.close

string

}

Closing marker (e.g., `}`).

templates

object

HTML templates for the main components.

templates.main

string

undefined

HTML template string for the control's basic structure.

templateMapping

object

Mapping of templates for specific use cases.

templateMapping.selected

string

undefined

Template variant for selected items (e.g., for rendering as a badge).

popper

object

Configuration for Popper.js to position the dropdown.

popper.placement

string

bottom

Popper.js placement strategy (e.g., "bottom-start").

popper.middleware

array<string|object>

flip, offset:1

Array of middleware configurations for Popper.js (e.g., ["flip", "offset:1"]).

mapping

object

Defines how fetched data is transformed into `options`.

mapping.selector

string

Path/selector to find the array of items within the fetched data (e.g., "results" for `data.results`).

mapping.labelTemplate

string

Template for the option label using placeholders (e.g., `Label: ${name}`).

mapping.valueTemplate

string

Template for the option value using placeholders (e.g., `ID: ${id}`).

mapping.filter

function|null

Optional callback function `(item) => boolean` to filter fetched items before processing.

mapping.sort

string|null

Optional sorting strategy for fetched items. Can be a string like `"asc"`/`"desc"` for label sorting, or a custom function defined as `"run:<code>"` or `"call:<functionName>"`.

mapping.total

string|null

Path/selector to the total number of items for pagination (e.g., "pagination.total").

mapping.currentPage

string|null

Path/selector to the current page number.

mapping.objectsPerPage

string|null

Path/selector to the number of objects per page.

empty

object

Handling of empty or undefined values.

empty.defaultValueRadio

string

Default value for `type="radio"` when no selection exists.

empty.defaultValueCheckbox

array

undefined

Default value (empty array) for `type="checkbox"`.

empty.equivalents

array

null,

Values that are considered "empty" (e.g., `undefined`, `null`, `""`) and are normalized to the default value.

formatter

object

Functions for formatting display values.

formatter.selection

function

undefined

Callback `(value, option) => string` to format the display text of selected values.

classes

object

CSS classes for various elements.

classes.badge

string

monster-badge-primary

CSS class for selection badges.

classes.statusOrRemoveBadge

string

empty

CSS class for the status or remove badge.

classes.remoteInfo

string

monster-margin-start-4 monster-margin-top-4

CSS class for the remote info badge.

classes.noOptions

string

monster-margin-top-4 monster-margin-start-4

CSS class for the "no options" message.

messages

object

Internal messages for ARIA attributes and screen readers (should not normally be changed).

messages.control

string|null

Message for the main control element.

messages.selected

string|null

Message for the selected items area.

messages.emptyOptions

string|null

Message for an empty options list.

messages.total

string|null

Message that communicates the total number of options.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomControl.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomControl.

Constructor

constructor()

Behavioral methods

fetch(url)

Parameters

url {string|url}: URL to fetch the options

Returns

{Promise}

If no url is specified, the options are taken from the Component itself.

reset()

Resets the select control: clears selection, resets options, removes status/errors.

State query methods

value()

Returns

{string}

The current selection of the Select ``e = document.querySelector('monster-select'); console.log(e.value) // ↦ 1 // ↦ ['1','2']``

value(value)

Parameters

value

Throws

{Error} unsupported type

Events

monster-selected this event is fired when the selection is set

Set selection ``e = document.querySelector('monster-select'); e.value=1``

Structural methods

getLastFetchedData()3.66.0

Returns

Throws

{Error} storeFetchedData is not enabled

setOption(path,value)

Parameters

path
value

Static methods

[instanceSymbol]()

Returns

{Symbol}

This method is called by the instanceof operator.

formAssociated()

Returns

{boolean}

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Select}

connectedCallback()

Returns

{void}

disconnectedCallback()

Returns

{void}

Other methods

blur()

The Button.blur() method removes focus from the internal button element.

calcAndSetOptionsDimension()

Returns

{Select}

click()3.27.0

The Button.click() method simulates a click on the internal button element.

focus(options)3.27.0

Parameters

options

The Button.focus() method sets focus on the internal button element.

importOptions(data)

Parameters

data {array|object|map|set}: data

Returns

{Select}

Throws

{Error} map is not iterable
{Error} missing label configuration

Events

monster-options-set this event is fired when the options are set

Import Select Options from dataset Not to be confused with the control defaults/options

Events

The component emits the following events:

monster-change
monster-changed
monster-options-set
this event is fired when the options are set
monster-selection-removed
monster-selection-cleared
monster-selected
this event is fired when the selection is set
monster-options-set
this event is fired when the options are set

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.