Text Area

A controllable text area box.

Text Area

Labelled Text Area
<tk-label id="labelled-text-area">
  Labelled Text Area
  <tk-text-area aria-labelledby="labelled-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.

Maximum Length

Maximum character length
<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>

Description

The maxLength prop can be provided to control the maximum number of characters that a tk-text-area will accept.

Placeholder

Example placeholder text
<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>

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

Prefilled text
<tk-label id="prefilled-text-area">
  Prefilled text
  <tk-text-area 
    value="Prefilled text"
    aria-labelledby="prefilled-text-area"
  >
  </tk-text-area>
</tk-label>

Description

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

Rows

Specified row count
<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>

Description

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.

States

Standard state
Error state
Disabled state
Readonly state
<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>

Description

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

States

Resize Both
Resize Vertical
<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>

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