Skip to content
Home

Textarea

Info
Demos
Properties
Events

Description

The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible.

Demos

Textarea with rows and colds

<Textarea

  label="Default:"

  rows="2"

  cols="20"

  value="Textarea value

Newline"

  spellCheck={false}

  on_change={({ value }) => {

    console.log('on_change', value)

  }}

  on_focus={() => {

    console.log('on_focus')

  }}

  on_blur={() => {

    console.log('on_blur')

  }}

/>

Textarea with placeholder text

<Textarea label="Placeholder:" placeholder="Placeholder text" />

Vertically placed label

<Textarea

  label="Vertical:"

  label_direction="vertical"

  rows="3"

  cols="33"

  value="Textarea value with more than 3 lines

Newline

Newline

Newline

Newline"

/>

Stretched horizontally placed label

<Textarea

  label="Horizontal:"

  stretch={true}

  rows="3"

  value="Nec litora inceptos vestibulum id interdum donec gravida."

/>

Autoresize with max rows

<Textarea

  label="Autogrow:"

  rows={1}

  autoresize={true}

  autoresize_max_rows={4}

  placeholder="Placeholder"

  on_key_down={({ rows, event }) => {

    if (rows >= 4 && event.key === 'Enter') {

      event.preventDefault()

    }

  }}

/>

Max length usage

<Textarea

  label="Length limit:"

  rows="3"

  cols="33"

  maxLength={20}

  required

  value="Nec litora inceptos vestibulum id interdum donec gravida."

/>

With FormStatus failure message

Message to the user
<Textarea

  label="Error Message:"

  cols="33"

  value="Nec litora inceptos vestibulum id interdum donec gravida."

  status="Message to the user"

/>

Disabled textarea

<Textarea

  label="Disabled:"

  disabled

  value="Nec litora inceptos vestibulum id interdum donec gravida."

/>

Textarea with a suffix

<Textarea

  label="Textarea with suffix:"

  value="Nec litora inceptos vestibulum id interdum donec gravida."

  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}

/>