Concorde UI component — Textarea. sonic-textarea wraps a native <textarea> with a label, a description and Concorde sizes. Native attributes (rows, cols, maxlength, wrap, …) are passed through. Bind the value to a store with formDataP Doc ID: core/components/ui/form/textarea/textarea. Keywords: Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component, , rows, cols, maxlength, wrap, formDataProvider, name, resize. URL: https://concorde.supersoniks.org/core/components/ui/form/textarea.

Textarea

sonic-textarea wraps a native <textarea> with a label, a description and Concorde sizes. Native attributes (rows, cols, maxlength, wrap, …) are passed through. Bind the value to a store with formDataProvider and name, set on the field or on an ancestor.

Basic example

<sonic-textarea label="Comments to the crew" placeholder="Write your message" description="Plain text only."></sonic-textarea>

Rows and resize

rows sets the visible height. With no resize, the user can resize vertically only.

<div class="grid gap-3">
      <sonic-textarea rows="6" label="Six rows"></sonic-textarea>
      <sonic-textarea resize="none" label="Not resizable"></sonic-textarea>
    </div>

Size and status

With no size, the textarea uses md. status colors the field; it defaults to default.

<div class="grid gap-3">
      <sonic-textarea rows="1" size="2xs" value="2xs"></sonic-textarea>
      <sonic-textarea rows="1" size="xs" value="xs"></sonic-textarea>
      <sonic-textarea rows="1" size="sm" value="sm"></sonic-textarea>
      <sonic-textarea rows="1" value="default"></sonic-textarea>
      <sonic-textarea rows="1" size="lg" value="lg"></sonic-textarea>
      <sonic-textarea rows="1" size="xl" value="xl"></sonic-textarea>
      <sonic-textarea rows="1" size="2xl" value="2xl"></sonic-textarea>
      <sonic-textarea rows="1" status="success" value="success"></sonic-textarea>
      <sonic-textarea rows="1" status="error" value="error"></sonic-textarea>
      <sonic-textarea rows="1" status="warning" value="warning"></sonic-textarea>
      <sonic-textarea rows="1" status="info" value="info"></sonic-textarea>
    </div>

Validation

required, minlength and maxlength are checked by the browser. Feedback styles apply once the field is touched (after blur).

<sonic-textarea required minlength="10" label="Special assistance request" placeholder="At least 10 characters"></sonic-textarea>

API reference