Textarea

<Textarea
  rows={2}
  value={demoText.medium}
  onChange={() => console.log()}
/>

<Textarea placeholder='Placeholder' />

<Arrange columns="1fr" gap="small">
  <Textarea placeholder="small" size="small" />
  <Textarea placeholder="medium" size="medium" />
</Arrange>

<Arrange columns="1fr" gap="small">
  <Textarea resize="none" placeholder="none" rows={1} />
  <Textarea resize="both" placeholder="both" rows={1} />
  <Textarea resize="horizontal" placeholder="horizontal" rows={1} />
  <Textarea resize="vertical" placeholder="vertical" rows={1} />
</Arrange>

<Textarea
  isDisabled
  rows={2}
  value={demoText.long}
  onChange={() => console.log()}
/>

() => {
  const inputEl = useRef(null)
  const onButtonClick = () => inputEl.current.focus()
  return (
    <>
      <Spacer bottom="small">
        <Button onClick={onButtonClick}>Focus this Textarea</Button>
      </Spacer>
      <Textarea ref={inputEl} />
    </>
  )
}