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

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

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

Vertically placed label

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

Code Editor
<Textarea
  label="Horizontal:"
  stretch={true}
  rows="3"
  value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

Autoresize with max rows

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

Code Editor
<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
Code Editor
<Textarea
  label="Error Message:"
  cols="33"
  value="Nec litora inceptos vestibulum id interdum donec gravida."
  status="Message to the user"
/>

Disabled textarea

Code Editor
<Textarea
  label="Disabled:"
  disabled
  value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

Textarea with a suffix

Code Editor
<Textarea
  label="Textarea with suffix:"
  value="Nec litora inceptos vestibulum id interdum donec gravida."
  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>