Skip to main content
3.2.0Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 3.2.0

Select

The Select component is an input field where the user can select between multiple predefined options, instead of manually typing. This is useful to restrict the user's options to valid values. The options will display in a dropdown bellow the input field on click. A default value can be preselected for the user, in cases where this is useful.

Basic Usage

<triton-select label="Normal select" placeholder="Select Country">
<triton-option value="norway">Norway</triton-option>
<triton-option value="sweden">Sweden</triton-option>
</triton-select>
<TritonSelect label="Normal select" placeholder="Select Country">
<TritonOption value="norway">Norway</TritonOption>
<TritonOption value="sweden">Sweden</TritonOption>
</TritonSelect>
<html> 
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-select label="Normal select" placeholder="Select Country">
<triton-option value="norway">Norway</triton-option>
<triton-option value="sweden">Sweden</triton-option>
</triton-select>
</body>
</html>
NorwaySweden

Variants

Multi Select

The multiple attribute on the <triton-select> element represents a control for selecting zero or more options from the list of options. Otherwise, the <triton-select> element represents a control for selecting a single <triton-option> from the list of options.

Feedbacktothisdocumentationiswelcome!
<triton-select label="Multi-select Options" multiple>
<triton-option selected>Feedback</triton-option>
<triton-option>to</triton-option>
...
</triton-select>

Appearance

Custom Options

The selectable options can be customized, for example by using a TritonIcon element.

GaugeAccessTableBorder TypeBoxBroadcast
<triton-select label="Select icon">
<triton-option>
<triton-gap align="center">
<triton-icon symbol="gauge"></triton-icon>Gauge
<triton-gap>
</triton-option>
<triton-option>
<triton-gap align="center">
<triton-icon symbol="access"></triton-icon>Access
</triton-gap>
</triton-option>
...
</triton-select>

Playground

API

Properties

TritonSelect

PropertyDescriptionTypeDefault
autocompleteA DOMString providing a hint for a users autocomplete feature. See the HTML autocomplete attribute for a complete list of values and detailsbooleanfalse
disabledThis Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example fieldset if there is no containing element with the disabled attribute set, then the control is enabled.boolean-
errorIf true, the select element will display as errorbooleanfalse
error-textError text displayed at the bottom of the field, if error is truestring-
formA string specifying the form element with which the input is associated that is, its form owner. This strings value, if present, must match the id of a form element in the same document. If this attribute isnt specified, the input element is associated with the nearest containing form, if any.string-
helper-textA brief text for the user, at the bottom of the fieldstring-
labelThe label displayed for the fieldstring-
multipleThis Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.booleanfalse
nameThis attribute is used to specify the name of the control.string-
placeholderInstructional text that shows before the input has a value.string-
requiredA Boolean attribute indicating that an option with a non-empty string value must be selected.boolean-
autofocusIf true the form control should has focus when the page loads. Only one form element in a document can have the autofocus attribute.booleanfalse
sizeSet the size of the componentbase body large medium small tiny xlarge xxlarge xxxlarge'body'
valueThe selected valuestring-

TritonOptgroup

PropertyDescriptionTypeDefault
disabledIf this Boolean attribute is set, none of the items in this option group is selectable.boolean-
labelThe name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.string-

TritonOption

PropertyDescriptionTypeDefault
border-colorIf present, this attribute will fill the border color of the select option. This will only work with a parent select with multiple attribute as truestring-
disabledIf this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it wont receive any browsing event, like mouse clicks or focus-related ones.boolean-
labelThis attribute is text for the label indicating the meaning of the option. If the label attribute isnt defined, its value is that of the element text content.string-
idEMPTYstringtriton-select-option-${componentNumber++}
selectedIf present, this Boolean attribute indicates that the option is initially selected. If the triton-option element is the descendant of a triton-select element whose multiple attribute is not set, only one single triton-option of this triton-select element may have the selected attribute.boolean-
valueThe content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.string-

Events

Main Component

NameTypeDescriptionExtra
atBlurCustomEvent<void>Emitted when the input loses focus-
atChangeCustomEvent<InputValue>Fires when the user selects an option.-
atFocusCustomEvent<void>Emitted when the input has focus-
atInputCustomEvent<void>Fires when the value of an select element has been changed.-
atCloseCustomEvent<void>Emitted when exit button has been clicked-
atClickCustomEvent<void>The default click behavior of the button-

Details

Depends on