InputArea
Implemented InputMulti-line textarea with auto-resize option.
Kumo reference: kumo-ui.com/components/input-area/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Basic
Provide details about your project
Show template
{% load wdj %}
<div class="inline-flex max-w-full">
{% include "wdj/components/textarea.html" with name="textarea_basic" label="Description" placeholder="Enter a description..." description="Provide details about your project" only %}
</div>Description
Explain the change.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/textarea.html" with name="textarea_description" label="Notes" description="Explain the change." only %}
</div>Error
Notes are required.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/textarea.html" with name="textarea_error" label="Notes" error="Notes are required." only %}
</div>Disabled
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/textarea.html" with name="textarea_disabled" label="Notes" value="Locked" disabled=True only %}
</div>Auto resize
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/textarea.html" with name="textarea_auto_resize" label="Release notes" rows=2 auto_resize=True only %}
</div>Custom rows
Show template
{% load wdj %}
{% include "wdj/components/textarea.html" with id="audit-area-custom-rows" name="notes" rows=8 label="Project notes" only %}Sizes
Show template
{% load wdj %}
{% for size in audit_sizes %}{% include "wdj/components/textarea.html" with id="audit-area-size-"|add:size label=size size=size name="audit-area-size" value="Server-rendered notes." only %}{% endfor %}Optional field
Show template
{% load wdj %}
{% include "wdj/components/textarea.html" with id="audit-area-optional-field" name="notes" optional=True label="Project notes" only %}Label tooltip
Provide a short description of the project.
Show template
{% load wdj %}
{% include "wdj/components/textarea.html" with id="audit-area-label-tooltip" name="notes" label_tooltip="Provide a short description of the project." label="Project notes" only %}Bare input area
Show template
{% load wdj %}
{% include "wdj/components/textarea.html" with id="audit-area-bare-input-area" name="notes" aria_label="Project notes" label="" only %}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | unset | Name; pass the documented value shown in the examples. |
| value | string | unset | Value; pass the documented value shown in the examples. |
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| optional | bool | False | Optional; pass the documented value shown in the examples. |
| label_tooltip | string | unset | Label tooltip; pass the documented value shown in the examples. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| error | string | unset | Validation message; implies error styling and accessible error association. |
| required | bool | False | Required; pass the documented value shown in the examples. |
| disabled | bool | False | Disabled; pass the documented value shown in the examples. |
| readonly | bool | False | Readonly; pass the documented value shown in the examples. |
| rows | number | 2 | Rows; pass the documented value shown in the examples. |
| size | string | base | Size; pass the documented value shown in the examples. |
| placeholder | string | unset | Placeholder; pass the documented value shown in the examples. |
| maxlength | string | unset | Maxlength; pass the documented value shown in the examples. |
| auto_resize | bool | False | Auto resize; pass the documented value shown in the examples. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| field_class | string | unset | Field class; pass the documented value shown in the examples. |