Textarea

A multi-line text input for longer free-form text. Supports validation states, row count, and max length. Follows USWDS textarea patterns.

Props

Prop	Default	Description
`id`		Unique ID for the textarea; also links the associated `c-label`
`name`		Form field name submitted with the form
`value`		Pre-filled text content
`hint`		Hint text displayed below the label via `c-label`
`error`		Error message text; also applies the error CSS class to the textarea
`success`		Set to `"true"` to apply the success CSS class
`disabled`		Set to `"true"` to disable the textarea
`readonly`		Set to `"true"` to make the textarea read-only
`required`		Set to `"true"` to mark the textarea as required
`rows`		Number of visible text rows (HTML `rows` attribute)
`maxlength`		Maximum number of characters allowed; wraps in a character count widget when set
`extra_classes`		Additional CSS classes for the textarea element
`input_classes`		Additional CSS classes applied directly to the `<textarea>` element

Example Usage

Basic Textarea

<c-label id="textarea-basic" label="Textarea label" />
<c-textarea id="textarea-basic" name="basic" />

Textarea with Hint

<c-label id="textarea-hint" label="Description" hint="Enter a brief description (optional)." />
<c-textarea id="textarea-hint" name="description" />

Textarea with Error

<c-label id="textarea-error" label="Comments" error="This field is required." />
<c-textarea id="textarea-error" name="comments" error="This field is required." />

Textarea with Success

<c-label id="textarea-success" label="Feedback" />
<c-textarea id="textarea-success" name="feedback" value="This is valid input." success="true" />

Textarea with Custom Row Count

<c-label id="textarea-rows" label="Notes" />
<c-textarea id="textarea-rows" name="notes" rows="4" />

Disabled Textarea

<c-label id="textarea-disabled" label="Archived notes" />
<c-textarea id="textarea-disabled" name="archived_notes" value="This content is read-only." disabled="true" />

Readonly Textarea

<c-label id="textarea-readonly" label="Terms of service" />
<c-textarea id="textarea-readonly" name="terms" value="These are the terms of service..." readonly="true" />

Required Textarea

<c-label id="textarea-required" label="Message" required="true" />
<c-textarea id="textarea-required" name="message" required="true" />

Textarea with Max Length

When maxlength is set, the textarea is automatically wrapped in a character count widget.

<c-label id="textarea-maxlength" label="Summary" hint="Maximum 200 characters." />
<c-textarea id="textarea-maxlength" name="summary" rows="5" maxlength="200" />

Usage Notes

Always pair c-textarea with a c-label referencing the same id
Pass error to both c-label (for the error message) and c-textarea (for the error border styling)
When maxlength is provided, a live character counter is automatically rendered via USWDS JavaScript
Wrap in c-form-group for correct USWDS form layout with label, hint, and error message

{% load cotton %}

<div class="component-variants">
    <h1>Textarea Component</h1>

    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        
        {% cotton form-group error="{{ variant.error }}" %}

            {% cotton label error="{{ variant.error }}" for="{{ id }}" %}
                {{ label|safe }}
            {% endcotton %}
  
            {% cotton textarea id="{{ variant.id }}" name="{{ variant.name }}" label="{{ variant.label }}" value="{{ variant.value }}" hint="{{ variant.hint }}" error="{{ variant.error }}" success="{{ variant.success }}" disabled="{{ variant.disabled }}" readonly="{{ variant.readonly }}" required="{{ variant.required }}" rows="{{ variant.rows }}" maxlength="{{ variant.maxlength }}" %}{% endcotton %}
        {% endcotton %}
    </div>
    {% endfor %}
    
</div>

name: Textarea
context:
  variants:
    - title: "Basic Textarea"
      id: "textarea-basic"
      name: "basic"
      label: "Textarea label"
      value: ""
      hint: ""
      error: ""
      success: ""
      disabled: ""
      readonly: ""
      required: ""
      rows: ""
      maxlength: ""

    - title: "Textarea with Error"
      id: "textarea-error"
      name: "error"
      label: "Textarea with error"
      value: ""
      hint: ""
      error: "This field is required"
      success: ""
      disabled: ""
      readonly: ""
      required: ""
      rows: ""
      maxlength: ""

    - title: "Textarea with Success"
      id: "textarea-success"
      name: "success"
      label: "Textarea with success"
      value: "This is valid input"
      hint: ""
      error: ""
      success: "true"
      disabled: ""
      readonly: ""
      required: ""
      rows: ""
      maxlength: ""

    - title: "Textarea with Custom Rows"
      id: "textarea-rows"
      name: "rows"
      label: "Textarea with 4 rows"
      value: ""
      hint: ""
      error: ""
      success: ""
      disabled: ""
      readonly: ""
      required: ""
      rows: "4"
      maxlength: ""

    - title: "Disabled Textarea"
      id: "textarea-disabled"
      name: "disabled"
      label: "Disabled textarea"
      value: "This is disabled content"
      hint: ""
      error: ""
      success: ""
      disabled: "true"
      readonly: ""
      required: ""
      rows: ""
      maxlength: ""

    - title: "Readonly Textarea"
      id: "textarea-readonly"
      name: "readonly"
      label: "Readonly textarea"
      value: "This is readonly content"
      hint: ""
      error: ""
      success: ""
      disabled: ""
      readonly: "true"
      required: ""
      rows: ""
      maxlength: ""

    - title: "Required Textarea"
      id: "textarea-required"
      name: "required"
      label: "Required textarea"
      value: ""
      hint: ""
      error: ""
      success: ""
      disabled: ""
      readonly: ""
      required: "true"
      rows: ""
      maxlength: ""

    - title: "Textarea with Maxlength"
      id: "textarea-maxlength"
      name: "maxlength"
      label: "Textarea with max length"
      value: ""
      hint: "Maximum 200 characters"
      error: ""
      success: ""
      disabled: ""
      readonly: ""
      required: ""
      rows: "5"
      maxlength: "200"