Textarea

Forms textarea

Multi-line text field with a label.

Markup

Drops in as data-pb-block="textarea".

html

<label data-pb-block="textarea" class="pb-textarea" style="display:block;max-width:24rem;font-family:inherit;">
  <span class="pb-textarea__label" style="display:block;margin:0 0 0.35rem;font-weight:600;color:#0f172a;font-size:0.9375rem;">Message</span>
  <textarea name="message" rows="4" placeholder="Type your message…" class="pb-textarea__control" style="width:100%;padding:0.6rem 0.75rem;border:1px solid #cbd5e1;border-radius:0.5rem;font-size:0.9375rem;color:#0f172a;outline-offset:2px;box-sizing:border-box;resize:vertical;font-family:inherit;"></textarea>
</label>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="textarea" so it imports as a labelled, editable component.
Field name: The control's name maps to a collection field key — the runtime collects it on submit of the surrounding Form.
Validation: Mark it required; the collection field's type and options (e.g. email, select choices) drive server-side validation.