Textarea#

<Textarea
  label="Default"
  rows="2"
  cols="20"
  value={'Textarea value\nNewline'}
  spellCheck={false}
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
  onFocus={() => {
    console.log('onFocus')
  }}
  onBlur={() => {
    console.log('onBlur')
  }}
/>

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

<Textarea
  label="Vertical"
  rows="3"
  cols="33"
  value={
    'Textarea value with more than 3 lines\nNewline\nNewline\nNewline\nNewline'
  }
/>

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

<Textarea
  label="Autogrow"
  rows={1}
  autoResize={true}
  autoResizeMaxRows={4}
  placeholder="Placeholder"
  onKeyDown={({ rows, event }) => {
    if (rows >= 4 && event.key === 'Enter') {
      event.preventDefault()
    }
  }}
/>

<Textarea
  label="Count characters"
  autoResize
  value={'Textarea value\nNewline'}
  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
    label="Small size"
    labelSrOnly
    placeholder="Small size"
    size="small"
    rows={1}
  />
  <Textarea
    label="Medium size"
    labelSrOnly
    placeholder="Medium size"
    size="medium"
    rows={1}
  />
  <Textarea
    label="Large size"
    labelSrOnly
    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>}
/>