#Textarea

<Textarea
  label="Default:"
  rows="2"
  cols="20"
  value="Textarea value
Newline"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
  on_focus={() => {
    console.log('on_focus')
  }}
  on_blur={() => {
    console.log('on_blur')
  }}
/>

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

<Textarea
  label="Vertical:"
  label_direction="vertical"
  rows="3"
  cols="33"
  value="Textarea value with more than 3 lines
Newline
Newline
Newline
Newline"
/>

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

<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()
    }
  }}
/>

<Textarea
  label="Length limit:"
  rows="3"
  cols="33"
  maxLength={20}
  required
  value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

<Textarea
  label="Error Message:"
  cols="33"
  value="Nec litora inceptos vestibulum id interdum donec gravida."
  status="Message to the user"
/>

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

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