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.

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.

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