A controllable text area box.
<tk-label id="labelled-text-area">
Labelled Text Area
<tk-text-area aria-labelledby="labelled-text-area" />
</tk-label>Text areas are inputs for inputting text. They can be resized to allow for larger amount of text input that the tk-input box.
<tk-label id="example-placeholder-text">
Maximum character length
<tk-text-area
aria-labelledby="max-length-text-area"
max-length="5">
</tk-text-area>
</tk-label>The maxLength prop can be provided to control the maximum number of characters that a tk-text-area will accept.
<tk-label id="example-placeholder-text">
Example placeholder text
<tk-text-area
placeholder="Example placeholder text"
aria-labelledby="example-placeholder-text">
</tk-text-area>
</tk-label>Placeholders can be added to the tk-text-area to give the user information, this disappears as soon as an input is entered.
<tk-label id="prefilled-text-area">
Prefilled text
<tk-text-area
value="Prefilled text"
aria-labelledby="prefilled-text-area"
>
</tk-text-area>
</tk-label>The value prop can be used to prefill the input, or to make the tk-text-area controlled.
<tk-label id="example-placeholder-text">
Specified row count
<tk-text-area
aria-labelledby="custom-rows-text-area"
rows="5">
</tk-text-area>
</tk-label>The number of rows of text you wish the tx-text-area to display can be specified. This will define the height of the tx-text-area.
<tk-label id="standard-state">
Standard state
<tk-text-area
placeholder="Standard state"
aria-labelledby="standard-state"
></tk-text-area>
</tk-label>
<hr>
<tk-label id="error-state">
Error state
<tk-text-area
error
placeholder="Error state"
aria-labelledby="error-state"
></tk-text-area>
</tk-label>
<hr>
<tk-label id="disabled-state">
Disabled state
<tk-text-area
disabled
placeholder="Disabled state"
aria-labelledby="disabled-state">
</tk-text-area>
</tk-label>
<hr>
<tk-label id="readonly-state">
Readonly state
<tk-text-area
readonly
placeholder="Readonly state"
aria-labelledby="readonly-state">
</tk-text-area>
</tk-label>The tk-text-area can be in error, disabled, or readonly states.
<tk-label id="resize-both">
Resize Both
<tk-text-area
placeholder="Resize Both"
aria-labelledby="resize-both">
</tk-text-area>
</tk-label>
<hr>
<tk-label id="resize-vertical">
Resize Vertical
<tk-text-area
placeholder="Resize Vertical"
resize="vertical"
aria-labelledby="resize-vertical"
></tk-text-area>
</tk-label>The tk-text-area’s resize functionality can be changed. If defaults to being resized both horizontally and vertically, but can also be set to only be resized vertically.
| Property | Required? | Default | Description |
|---|---|---|---|
value |
no | The current value of the text area, this can be used to prefill data | |
placeholder |
no | The greyed out prompt text shown when no value is present | |
error |
no | Displays the text area in a error style | |
disabled |
no | Displays the text area in a disabled style, and disables input | |
readonly |
no | Displays the text area in a readonly style, and disables input | |
resize |
no | both |
Sets the resize axis, can be set to either both or vertical |
| Name | Description |
|---|---|
valueChanged |
This event is fired every time the text area changes, it receives a string of what is in the text area |