Textarea

<cc-textarea label="Message"></cc-textarea>

Helper Text

<cc-textarea label="Message" helper-text="Please leave your message"></cc-textarea>

Or, using slot to add label and helper text if you need them to be HTML.

<cc-textarea>
  <div slot="label">Message</div>
  <div slot="helper-text">Please leave your message</div>
</cc-textarea>

Placeholder

<cc-textarea label="Message" placeholder="Message"></cc-textarea>

Rows

<cc-textarea label="Message" rows="6"></cc-textarea>

Required

<form>
  <cc-textarea label="Message" placeholder="Message" name="message" required>
  </cc-textarea>
  <cc-button type="submit">Submit</cc-button>
</form>

Disabled

<cc-textarea label="Message" disabled></cc-textarea>

Readonly

@todo - What if we need initial value of textarea? Using textContent to grab the content form light dom will not work as we also need to support label and helper-text slots.

<cc-textarea label="Message" readonly></cc-textarea>