Version: 2.0.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>

Norway

Sweden

Appearance

Custom Options

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

Gauge

Access

Table

Border Type

Box

Broadcast

<triton-select label="Select icon">
  <triton-option><triton-icon symbol="gauge"></triton-icon>Gauge</triton-option>
  <triton-option><triton-icon symbol="access"></triton-icon>Access</triton-option>
  ...
</triton-select>

Playground

Feedback

this

documentation

welcome!

Gauge

Access

Table

API

Properties

triton-select

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`	-
`name`	^{This attribute is used to specify the name of the control.}	`string`	`this.inputId`
`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`	`defaultOptions.baseSize`
`value`	^{The selected value}	`string`	-

triton-option

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

Name	Type	Description	Extra
atBlur	`CustomEvent<void>`	Emitted when the input loses focus	-
atChange	`CustomEvent<InputValue>`	Fires when the user selects an option.	-
atFocus	`CustomEvent<void>`	Emitted when the input has focus	-
atInput	`CustomEvent<void>`	Fires when the value of an select element has been changed.	-

Slots

This slot can only be passed TritonSelectOption elements

<triton-select>
  <div slot="This slot can only be passed TritonSelectOption elements"></div>
</triton-select>

Details

Depends on

TritonIcon

Select

Basic Usage​

Appearance​

Custom Options​

Playground​

API​

Properties​

triton-select​

triton-option​

Events​

Slots​

This slot can only be passed TritonSelectOption elements​

Details​

Depends on​