Version: 3.1.0

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

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	`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 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`
`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`~~	~~After release of 2.0.0 use slottrailing-slot instedA unit which is displayed inside the input field, on the right side~~ Deprecation	`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.	-

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>

Input

Basic Usage​

Variants​

Number Input​

Behavior​

Step Using Arrow-Keys​

Appearance​

Label​

Subtext​

Required​

Icons​

Size​

Playground​

API​

Properties​

Events​

Slots​

leading​

trailing​