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>
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.
<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.
<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
| Property | Description | Type | Default |
|---|---|---|---|
autocomplete | A DOMString providing a hint for a users autocomplete feature. See the HTML autocomplete attribute for a complete list of values and details | boolean | false |
disabled | This 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 | - |
error | If true, the select element will display as error | boolean | false |
error-text | Error text displayed at the bottom of the field, if error is true | string | - |
form | A 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-text | A brief text for the user, at the bottom of the field | string | - |
label | The label displayed for the field | string | - |
multiple | This 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. | boolean | false |
name | This attribute is used to specify the name of the control. | string | - |
placeholder | Instructional text that shows before the input has a value. | string | - |
required | A Boolean attribute indicating that an option with a non-empty string value must be selected. | boolean | - |
autofocus | If true the form control should has focus when the page loads. Only one form element in a document can have the autofocus attribute. | boolean | false |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
value | The selected value | string | - |
TritonOptgroup
| Property | Description | Type | Default |
|---|---|---|---|
disabled | If this Boolean attribute is set, none of the items in this option group is selectable. | boolean | - |
label | The 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
| Property | Description | Type | Default |
|---|---|---|---|
border-color | If present, this attribute will fill the border color of the select option. This will only work with a parent select with multiple attribute as true | string | - |
disabled | If 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 | - |
label | This 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 | - |
id | EMPTY | string | triton-select-option-${componentNumber++} |
selected | If 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 | - |
value | The 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
| Name | Type | Description | Extra |
|---|---|---|---|
| atBlur | CustomEvent<void> | Emitted when the input loses focus | - |
| atChange | CustomEvent<InputValue> | Fires when the user selects an option. | - |
| atClear | CustomEvent<void> | Fires when the all values are cleared with the button. Only when multiple is true | - |
| atFocus | CustomEvent<void> | Emitted when the input has focus | - |
| atInput | CustomEvent<void> | Fires when the value of an select element has been changed. | - |