Version: 3.1.0

Textarea

The Text Area component is similar to the Input component, but lets users write a longer text input. In a form this might be used to gather qualitative feedback, or to let users write a paragraph of description.

Basic Usage

<triton-textarea label="This is a label"></triton-textarea>

<TritonTextarea label="This is a label"></TritonTextarea>

<html> 
  <head> 
    <script type="module"> 
      import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js'; 
      defineCustomElements(); 
    </script> 
  </head> 
  <body> 
    <triton-textarea label="This is a label"></triton-textarea>
  </body> 
</html>

Behavior

Resize Options

This prop allows you to set which options the user has for resizing the TextArea. The default resize setting is auto, which allows the user to resize the TextArea both horizontally and vertically

<triton-textarea resize="vertical" label="This TextArea can be resized vertically"></triton-textarea>
<triton-textarea resize="none" label="This TextArea can not be resized"></triton-textarea>

Appearance

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-textarea helper-text="A helper text message"></triton-textarea>
<triton-textarea helper-text="A error text message"></triton-textarea>

Playground

API

Properties

Property	Description	Type	Default
`autofocus`	This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.	`boolean`	-
`cols`	The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, fluid will be applied.	`number`	-
`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 when the disabled attribute is set, the control is enabled.	`boolean`	-
`error`	If true the textarea is invalid	`boolean`	`false`
`error-text`	Error text displayed at the bottom of the textarea, if error is true	`string`	-
`form`	The form element that the textarea element is associated with its form owner. The value of the attribute must be the id of a form element in the same document. If this attribute is not specified, the textarea element must be a descendant of a form element. This attribute enables you to place textarea elements anywhere within a document, not just as descendants of form elements.	`string`	-
`helper-text`	A brief text for the user, at the bottom of the textarea	`string`	-
`label`	The label displayed for the textarea	`string`	-
`maxlength`	The maximum number of characters UTF-16 code units that the user can enter. If this value isnt specified, the user can enter an unlimited number of characters.	`number`	-
`minlength`	The minimum number of characters UTF-16 code units required that the user should enter.	`number`	-
`name`	The name of the control.	`string`	-
`placeholder`	A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.	`string`	-
`readonly`	This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.	`boolean`	-
`required`	This attribute specifies that the user must fill in a value before submitting a form.	`boolean`	-
`resize`	Set how the user can resize the textarea	`auto` `horizontal` `none` `vertical`	`'auto'`
`rows`	The number of visible text lines for the control.	`number`	`4`
`spellcheck`	Specifies whether the textarea is subject to spell checking by the underlying browserOS. The value can betrue Indicates that the element needs to have its spelling and grammar checked.default Indicates that the element is to act according to a default behavior, possibly based on the parent elements own spellcheck value.false Indicates that the element should not be spell checked.	`boolean`	-
`value`	The value, i.e. the text, of the textarea	`string`	-
`wrap`	Indicates how the control wraps text. Possible values arehard The browser automatically inserts line breaks CRLF so that each line has no more than the width of the control the cols attribute must also be specified for this to take effect.soft The browser ensures that all line breaks in the value consist of a CRLF pair, but does not insert any additional line breaks.	`string`	-

Events

Name	Type	Description	Extra
atBlur	`CustomEvent<void>`	Emitted when the input loses focus.	-
atChange	`CustomEvent<InputValue>`	Emitted after onChange on textarea	-
atFocus	`CustomEvent<void>`	Emitted when the input has focus.	-
atInput	`CustomEvent<KeyboardEvent>`	Emitted after onInput on textarea	-

Textarea

Basic Usage​

Behavior​

Resize Options​

Appearance​

Subtext​

Playground​

API​

Properties​

Events​