Input
Input is a text field where users can type their input. Some Input fields allow only numbers, while others are more open-ended. This component is the foundation for many other components which have to do with user input, such as Auto Complete, Date Picker etc.
Basic Usage
<triton-input></triton-input>
<TritonInput/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-input></triton-input>
</body>
</html>
This component follows web standard conventions so any standard props (e.g. placeholder) will be supported.
Variants
Number Input
TritonInput also supports numeric input fields. These fields work similarly to normal ones, but with some extra features to support numbers.
To use this kind of input field, set the type property to number.
<triton-input type="number"></triton-input>
Behavior
Step Using Arrow-Keys
A numeric TritonInput has the added feature of up/down arrows to increment or decrement the value.
However in some cases an application will need to specify how much the number should change for each up/down click.
Use the step property to set the value which will be added or subtracted by each arrow click.
<triton-input type="number" step="100" value="300"></triton-input>
Appearance
Label
A label can be used as a small header for the TritonInput.
<triton-input label="This is the label"></triton-input>
Subtext
There are two options for subtext of an input field.
A brief helper-text can be added to help users understand how to use the Input.
Alternatively error-text can also be added, to indicate that there is something wrong with the user's input.
When both of these are provided, error-text will take presidence.
<triton-input helper-text="This is some helper text" ></triton-input>
<triton-input error-text="This is some error text" ></triton-input>
Required
Use the required property to indicate that the field is mandatory to fill out by the user.
<triton-input required label="Required" placeholder="This field is required"></triton-input>
Icons
Input has two properties for providing icons, leading and trailing positions.
These are accessed by the icon-leading and icon-trailing properties.
<triton-input label="Leading Icon" icon-leading="arrow-down"></triton-input>
<triton-input label="Trailing Icon" icon-trailing="arrow-up"></triton-input>
<triton-input label="Leading and Trailing Icon" icon-trailing="arrow-up" icon-leading="arrow-down"></triton-input>
<triton-input label="Loading Icon" icon-leading="loading"></triton-input>
Size
The following sizes are described in the Triton Design System.
smallsize has a height of2emandbasesize has a height of2.5em
<triton-input size="small" label="Small Size" placeholder="This is a small input"></triton-input>
<triton-input size="base" label="Base Size" placeholder="This is the base sized input"></triton-input>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
autocomplete | Toggle default browser auto complete list | boolean | true |
clear-input | If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. | boolean | false |
clear-on-edit | If true, the value will be cleared after focus upon edit. Defaults to true when type is password, false for all other types. | boolean | - |
disabled | If true, the component will look disabled and not be interactable | boolean | false |
error | If true the field is invalid. This is set to true if error text is provided | boolean | false |
error-text | Error text displayed at the bottom of the field. If error text is given error is set to 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 TritonInput 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 | - |
icon-leading | Display icon on the left side of the input | Icon | - |
icon-trailing | Display icon on the right side of the input | Icon | - |
inputmode | A hint to the browser for which keyboard to display. | decimal email none numeric search tel text url | - |
label | The label displayed for the field | string | - |
max | The maximum value the input can have. max can not be less than the value of the min attribute | string | - |
maxlength | If the value of the type attribute is text, email, search, password, tel, or url,this attribute specifies the maximum number of characters that the user can enter | number | - |
min | The minimum value the input can have. min can not be greater than the value of the max attribute | string | - |
minlength | If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters that the user can enter | number | - |
name | The name of the control, which is submitted with the form data. | string | - |
pattern | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, date, or password, otherwise it is ignored. When the type attribute is date, pattern will only be used in browsers that do not support the date input type natively. See httpsdeveloper.mozilla.orgen-USdocsWebHTMLElementinputdate for more information | string | - |
placeholder | Instructional text that shows before the input has a value | string | - |
readonly | If true, the user cannot modify the value | boolean | false |
required | If true, the user must fill in a value before submitting a form | boolean | false |
selection-direction | Returns Sets the direction in which selection occurred. Possible values are forward the selection was performed in the start-to-end direction of the current locale, backward the opposite direction or none the direction is unknown. | backward forward none | - |
selection-end | Returns Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor caret inside of the input element. | number | - |
selection-start | Returns Sets the end index of the selected text. When theres no selection, this returns the offset of the character immediately following the current text input cursor position. | number | - |
setautofocus | This attribute lets you specify whether a form control should have input focus when the page loads or not | boolean | false |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
spell-check | If true, the element will have its spelling and grammar checked | boolean | false |
step | Set how much the value changes when the user uses up or down arrows to increment it.Possible values are any or a positive floating point number | string | - |
type | The type of input field to display | date email number password search select select-multiple tel text time url | 'text' |
unit | string | - | |
value | The value of the input | number string | '' |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atBlur | CustomEvent<void> | Emitted when the input loses focus. | - |
| atChange | CustomEvent<InputValue> | Emitted when the value has changed. | - |
| atFocus | CustomEvent<void> | Emitted when the input has focus. | - |
| atInput | CustomEvent<KeyboardEvent> | Emitted when a keyboard input occurred. | - |
Methods
| Function | Description | Params | Extra |
|---|---|---|---|
setSelectionRange | The HTMLTritonInput.setSelectionRange method sets the start and end positions of the current text selection in an input or textarea element.This feature is exclusively accessible when the type parameter is set to either text, password, search, tel, url | (selectionStart: number, selectionEnd: number, selectionDirection?: SelectionDirection) => Promise<void> | |
stepDown | The HTMLTritonInput.stepDownn method decrements the value of a numeric type of triton-input element by the value of the step attribute or up to n multiples of the step attribute if a number is passed as the parameter.Its only available when type is number, date, timeThis feature is exclusively accessible when the type parameter is set to either number, date or time | (stepIncrement?: number) => Promise<void> | |
stepUp | The HTMLTritonInput.stepUp method increments the value of a numeric type of triton-input element by the value of the step attribute, or the default step value if the step attribute is not explicitly set. The method, when invoked, increments the value by step n, where n defaults to if not specified, and step defaults to the default value for step if not specified.This feature is exclusively accessible when the type parameter is set to either number, date or time | (stepIncrement?: number) => Promise<void> |
Slots
leading
Append any element into the leading position of the input field
<triton-input>
<div slot="leading"></div>
</triton-input>
trailing
Append any element into the trailing position of the input field
<triton-input>
<div slot="trailing"></div>
</triton-input>