#Textarea

<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 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="Count characters"
  label_direction="vertical"
  autoresize
  value="Textarea value
Newline"
  status="Message to the user"
  characterCounter={40}
/>

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

<Flex.Stack>
  <Textarea placeholder="Small size" size="small" rows={1} />
  <Textarea placeholder="Medium size" size="medium" rows={1} />
  <Textarea placeholder="Large size" size="large" rows={1} />
</Flex.Stack>

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