Navigation Back to home

Select

A beautiful select control that can make your life easier and also looks good.

Import
the javascript logo
import { Select } from "@schukai/monster/source/components/form/select.mjs";
Source
the git logo
Package
the npm logo
Since
1.0.0

Introduction

The select control is a versatile and flexible component that allows users to select one or more options from a list. It is widely used in many applications. This documentation explains the various properties and functions of the select control.

Select Control as a Dropdown List

The simplest form of the select control is a dropdown list. This displays a list of options from which the user can choose one. The list is displayed only when the user clicks on the control and is hidden again when the user selects an option or leaves the control.

Lazy Loading of Options

In cases where the list of options is extensive, it may not be practical to load all the options at once. Loading all options could cause long loading times. Instead, options can be loaded only when the user clicks on the control. This feature is known as lazy loading.

To enable lazy loading, set the feature features.lazyload to true. When enabled, options will be loaded when the user interacts with the control. Note that lazy loading cannot be used simultaneously with the remote filtering function.

Filtering

When the list of options is long, it can be helpful to make the options filterable. Filtering can be enabled by setting filter.mode to options. This enables the local filtering of options, displaying only those that match the filter criteria.

The position of the filter can be controlled using the option filter.position, which allows placement of the filter input field.

Remote Filtering

In some cases, it is useful to filter the options dynamically, especially when they come from a database. Users should only see options relevant to a specific search term. This is achieved by enabling the remote filter feature.

To activate remote filtering, set filter.mode to remote.

Lookup Functionality

A select control can hold one or multiple values in a multi-select mode. These values are often keywords or IDs, which need to be associated with labels. In a standard list, labels are taken from the options. However, when using lazy loading or remote filtering with a pre-existing selection, the labels may not be immediately available, and only the values will be displayed, which can be confusing for users.

To prevent this issue, the internal lookup function is called when using remote filtering or lazy loading. This sends the selected values to the server, which then returns the corresponding labels, and the labels are displayed in the list.

The URL used for the lookup can be defined using the url option, or a specific lookup URL can be provided via lookup.url.

If lookup.grouping=true is set, all values in a multi-select control will be sent in one request. If set to false, a request will be sent for each individual value. While this can increase server load, it may also improve performance in some cases.

Behavioral Options

The select control offers several options to control its behavior and appearance. Below are some of the key settings:

  • features.clearAll: Enables or disables a button to clear the selection.
  • features.clear: Controls whether individual values can be removed from the selection.
  • features.closeOnSelect: Determines whether the dropdown should close after a value is selected.
  • features.useStrictValueComparison: Defines whether the comparison of values in the selection is performed using === or ==.

Fetching and Data Handling

When data is retrieved remotely at runtime, the fetch feature is used. You can pass a fetch object with all the supported options, allowing full customization of the request.

If the API returns additional data alongside the values and labels (e.g., metadata), you may wish to process this data elsewhere in the application. Using features.storeFetchedData, the data from the last fetch request can be stored in a variable for further processing.

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);

HTML

Stylesheet

/** no additional stylesheet is defined **/

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.

10
20
30 x ❤

Javascript

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

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 **/

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);

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

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);

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

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);

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

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);

HTML

<body></body>

Stylesheet

/** no additional stylesheet is defined **/

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';

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 **/

Server Side Filtering With A Remote URL

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';

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 **/

Server Side Filtering With Pagination

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';

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 **/

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);

HTML

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

Stylesheet

/** no additional stylesheet is defined **/

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
40
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

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.