Textarea

Multiline text input with a label and validation state.

template 1 required 10 optional 4 slots 1 a11y rule

Reference Guide

Preview

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.name = 'gallery_textarea'
        self.label = 'Textarea'
        self.placeholder = 'Write something...'
        self.rows = 4
my_template.html
django
{% load theme_components %}
{% theme_textarea name=name label=label placeholder=placeholder rows=rows %}

Props

NameTypeRequiredDefaultDescription
namestrrequired——
labelOptional[str]——
placeholderstr——
rowsint4—
field_idstr——
css_prefixstr——
attrsdict——
slot_labelstr——
slot_textareastr——
slot_help_textstr——
slot_errorstr——

Accessibility

RequirementElementAttributeValue
Label must reference textarea via for attributelabelfor(present)

Slots

slot_label slot_textarea slot_help_text slot_error
Source & styles
FilePathNotes
templatedjust_theming/components/textarea.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 3 of this component's classes at line 1646, 1653, 1699. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--background --destructive --destructive-text --foreground --input --muted-foreground --radius --ring
Template source — textarea.html
django
<div class="{{ css_prefix }}textarea-group {% if attrs.class %}{{ attrs.class }}{% endif %}">
    {% if slot_label %}
    {{ slot_label|safe }}
    {% elif label %}
    <label for="{{ field_id|default:name }}" class="{{ css_prefix }}textarea-label">{{ label }}</label>
    {% endif %}
    {% if slot_textarea %}
    {{ slot_textarea|safe }}
    {% else %}
    <textarea
        name="{{ name }}"
        id="{{ field_id|default:name }}"
        placeholder="{{ placeholder }}"
        rows="{{ rows }}"
        class="{{ css_prefix }}textarea"
        {% if attrs.required %}required{% endif %}
        {% if attrs.disabled %}disabled{% endif %}
        {% if attrs.readonly %}readonly{% endif %}
    >{% if attrs.value %}{{ attrs.value }}{% endif %}</textarea>
    {% endif %}
    {% if slot_help_text %}
    <div class="{{ css_prefix }}textarea-help">{{ slot_help_text|safe }}</div>
    {% endif %}
    {% if slot_error %}
    <div class="{{ css_prefix }}textarea-error" role="alert">{{ slot_error|safe }}</div>
    {% endif %}
</div>