Textarea

Área multilínea. Por defecto resizable verticalmente. Suele ir dentro de un field.

Estados de error: para mostrar icono + mensaje de error, envuelve el textarea en <Field error="…"> (ver demo «Con field — error» más abajo). El modificador invalid standalone solo pinta el borde rojo.

Default

<textarea id="notes"
  name="notes"
  rows="4"
  class="textarea" placeholder="Detalles del cliente, preferencias, alergias…"></textarea>

{% from "textarea.jinja" import textarea %}
{{ textarea("notes", placeholder="Detalles del cliente, preferencias, alergias…") }}

<Textarea label="notes" placeholder="Detalles del cliente, preferencias, alergias…" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Con field — label + hint

Notas internas

Solo visible para el equipo. Hasta 500 caracteres.

<div class="field">
  <label class="field-label">
    Notas internas
  </label>
  <div class="field-control">
    
  <textarea id="notes"
  name="notes"
  rows="4"
  class="textarea" placeholder="Escribe aquí…"></textarea>

  </div><span class="field-hint">Solo visible para el equipo. Hasta 500 caracteres.</span>
</div>

{% from "textarea.jinja" import textarea %}
{% from "field.jinja" import field %}
{% call field("Notas internas", hint="Solo visible para el equipo. Hasta 500 caracteres.") %}
  {{ textarea("notes", placeholder="Escribe aquí…") }}
{% endcall %}

<Field label="Notas internas" hint="Solo visible para el equipo. Hasta 500 caracteres.">
  <Textarea label="notes" placeholder="Escribe aquí…" />
</Field>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Con field — error (icono + mensaje)

Motivo de la devolución *

Por favor describe el motivo

<div class="field error">
  <label class="field-label">
    Motivo de la devolución <span class="field-required" aria-label="obligatorio">*</span>
  </label>
  <div class="field-control">
    
  <textarea id="reason"
  name="reason"
  rows="4"
  class="textarea invalid" placeholder="Mínimo 20 caracteres…"></textarea>

    <span class="field-error-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
    </span>
  </div><span class="field-error" role="alert">Por favor describe el motivo</span>
</div>

{% from "textarea.jinja" import textarea %}
{% from "field.jinja" import field %}
{% call field("Motivo de la devolución", required=True, error="Por favor describe el motivo") %}
  {{ textarea("reason", value="", placeholder="Mínimo 20 caracteres…", invalid=True) }}
{% endcall %}

<Field label="Motivo de la devolución" required error="Por favor describe el motivo">
  <Textarea label="reason" placeholder="Mínimo 20 caracteres…" invalid />
</Field>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Estados

<div style="display:grid;gap:8px;max-width:480px">
  <textarea id="ok"
  name="ok"
  rows="4"
  class="textarea">Texto válido.</textarea>
  <textarea id="err"
  name="err"
  rows="4"
  class="textarea invalid">Texto con error.</textarea>
  <textarea id="dis"
  name="dis"
  rows="4"
  class="textarea" disabled>Deshabilitado.</textarea>
</div>

{% from "textarea.jinja" import textarea %}
<div style="display:grid;gap:8px;max-width:480px">
  {{ textarea("ok", value="Texto válido.") }}
  {{ textarea("err", value="Texto con error.", invalid=True) }}
  {{ textarea("dis", value="Deshabilitado.", disabled=True) }}
</div>

<div style="display:grid;gap:8px;max-width:480px">
  <Textarea label="ok" value="Texto válido." />
  <Textarea label="err" value="Texto con error." invalid />
  <Textarea label="dis" value="Deshabilitado." disabled />
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Datastar — contador de caracteres

/ 500 caracteres

<div data-signals="{ msg: '' }">
  <textarea id="msg"
  name="msg"
  rows="4"
  class="textarea" placeholder="Cuéntanos…" data-bind-msg=""></textarea>
  <p style="margin-top:8px;font-size:12px;">
    <strong data-text="$msg.length"></strong> / 500 caracteres
  </p>
</div>

{% from "textarea.jinja" import textarea %}
<div data-signals="{ msg: '' }">
  {{ textarea("msg", placeholder="Cuéntanos…", attrs={"data-bind-msg": ""}) }}
  <p style="margin-top:8px;font-size:12px;">
    <strong data-text="$msg.length"></strong> / 500 caracteres
  </p>
</div>

<div data-signals="{ msg: '' }">
  <Textarea label="msg" placeholder="Cuéntanos…" data-bind-msg="" />
  <p style="margin-top:8px;font-size:12px;">
    <strong data-text="$msg.length"></strong> / 500 caracteres
  </p>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`name`	str	—	Atributo `name`.
`value`	str	""	Contenido inicial.
`placeholder`	str	""	Texto guía.
`rows`	int	4	Filas visibles.
`invalid`	bool	false	Estado de error.
`disabled`	bool	false	Deshabilita el textarea.
`required`	bool	false	Marca como requerido.
`attrs`	dict	{}	Atributos extra.