A controllable text area box.
<tk-text-area>
</tk-text-area>
<hr>
<tk-label>
Labelled Text Area
<tk-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-text-area placeholder="Example placeholder text">
</tk-text-area>Placeholders can be added to the tk-text-area to give the user information, this disappears as soon as an input is entered.
<tk-text-area value="Prefilled text">
</tk-text-area>The value prop can be used to prefill the input, or to make the tk-text-area controlled.
<tk-text-area placeholder="Standard state">
</tk-text-area>
<hr>
<tk-text-area
error
placeholder="Error state"
>
</tk-text-area>
<hr>
<tk-text-area
disabled
placeholder="Disabled state">
</tk-text-area>
<hr>
<tk-text-area
readonly
placeholder="Readonly state">
</tk-text-area>The tk-text-area can be in error, disabled, or readonly states.
<tk-text-area placeholder="Resize Both">
</tk-text-area>
<hr>
<tk-text-area
placeholder="Resize Vertical"
resize="vertical"
>
</tk-text-area>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 |