Skip to main content
2.1.1Next5.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: 2.1.1

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.

small size has a height of 2em and base size has a height of 2.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

PropertyDescriptionTypeDefault
autocompleteToggle default browser auto complete listbooleantrue
clear-inputIf true, a clear icon will appear in the input when there is a value. Clicking it clears the input.booleanfalse
clear-on-editIf true, the value will be cleared after focus upon edit. Defaults to true when type is password, false for all other types.boolean-
disabledIf true, the component will look disabled and not be interactablebooleanfalse
errorIf true the field is invalidbooleanfalse
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 TritonInput element is associated with the nearest containing form, if anystring-
helper-textA brief text for the user, at the bottom of the fieldstring-
icon-leadingDisplay icon on the left side of the inputIcon-
icon-trailingDisplay icon on the right side of the inputIcon-
inputmodeA hint to the browser for which keyboard to display.decimal email none numeric search tel text url-
labelThe label displayed for the fieldstring-
maxThe maximum value the input can have. max can not be less than the value of the min attributestring-
maxlengthIf 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 enternumber-
minThe minimum value the input can have. min can not be greater than the value of the max attributestring-
minlengthIf 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 enternumber-
nameThe name of the control, which is submitted with the form data.stringthis.inputId
patternA 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 informationstring-
placeholderInstructional text that shows before the input has a valuestring-
readonlyIf true, the user cannot modify the valuebooleanfalse
requiredIf true, the user must fill in a value before submitting a formbooleanfalse
setautofocusThis attribute lets you specify whether a form control should have input focus when the page loads or notbooleanfalse
sizeSet the size of the componentbase body large medium small tiny xlarge xxlarge xxxlargedefaultOptions.baseSize
spell-checkIf true, the element will have its spelling and grammar checkedbooleanfalse
stepSet 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 numberstring-
typeThe type of input field to displaydate email number password search select select-multiple tel text time url'text'
unitstring-
valueThe value of the inputnumber string''

Events

NameTypeDescriptionExtra
atBlurCustomEvent<void>Emitted when the input loses focus.-
atChangeCustomEvent<InputValue>Emitted when the value has changed.-
atFocusCustomEvent<void>Emitted when the input has focus.-
atInputCustomEvent<KeyboardEvent>Emitted when a keyboard input occurred.-

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>