Text Area

A controllable text area box.

Text Area


Labelled Text Area
<tk-text-area>
</tk-text-area>
<hr>
<tk-label>
  Labelled Text Area
  <tk-text-area />
</tk-label>

Description

Text areas are inputs for inputting text. They can be resized to allow for larger amount of text input that the tk-input box.

Placeholder

<tk-text-area placeholder="Example placeholder text">
</tk-text-area>

Description

Placeholders can be added to the tk-text-area to give the user information, this disappears as soon as an input is entered.

Prefilled / Controlled

<tk-text-area value="Prefilled text">
</tk-text-area>

Description

The value prop can be used to prefill the input, or to make the tk-text-area controlled.

States




<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>

Description

The tk-text-area can be in error, disabled, or readonly states.

States


<tk-text-area placeholder="Resize Both">
</tk-text-area>
<hr>
<tk-text-area
  placeholder="Resize Vertical"
  resize="vertical"
>
</tk-text-area>

Description

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.

Props

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

Events

Name Description
valueChanged This event is fired every time the text area changes, it receives a string of what is in the text area