Textarea

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

<Textarea placeholder='Placeholder' />

<Distribute direction="column" gap="small">
  <Textarea placeholder="small" size="small" />
  <Textarea placeholder="medium" size="medium" />
</Distribute>

<Distribute direction="column" 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} />
</Distribute>

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

class FocusThisInput extends React.Component {
  render() {
    return (
      <Distribute direction="column" gap="small">
        <Button onClick={() => this.myInput.focus()}>Focus this Textarea</Button>
        <Textarea
          ref={input => {
            this.myInput = input
          }}
        />
      </Distribute>
    )
  }
}