textarea

Multi-line text control with state attributes for empty/required/disabled/error.

Use native textarea controls; AngularCSS styles them directly.

<textarea placeholder="Add a message"></textarea>
<textarea placeholder="Invalid" aria-invalid="true"></textarea>

Example

View source
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AngularCSS Textarea</title>
    <link rel="stylesheet" href="../../css/preflight.css" />
    <link rel="stylesheet" href="../../css/angular.css" />
    <link rel="stylesheet" href="../example.css" />
    <script src="../../js/angular-ts.umd.js"></script>
    <script src="../../js/angular-css.umd.js"></script>
  </head>
  <body
    ng-app="angular.css"
    ng-cloak
    ng-init="message='Ship semantic components';rtlMessage='';textareaAction='Ready'"
    data-example="textarea-button textarea-demo textarea-disabled textarea-field textarea-invalid textarea-rtl"
  >
    <main class="visual-example">
      <div class="field">
        <label for="docs-textarea-message">Message</label>
        <textarea
          id="docs-textarea-message"
          placeholder="Add a message"
          ng-model="message"
        ></textarea>
        <p>Add context for your request.</p>
      </div>

      <div class="field">
        <label for="docs-textarea-disabled">Disabled</label>
        <textarea
          id="docs-textarea-disabled"
          placeholder="Disabled"
          disabled
        ></textarea>
      </div>

      <div class="field">
        <label for="docs-textarea-invalid">Invalid</label>
        <textarea
          id="docs-textarea-invalid"
          placeholder="Invalid"
          aria-invalid="true"
        ></textarea>
        <p class="field-error">A message is required.</p>
      </div>

      <div class="textarea-button-demo field">
        <label for="docs-textarea-reply">Reply</label>
        <textarea
          id="docs-textarea-reply"
          placeholder="Type your message here."
        ></textarea>
        <button type="button" ng-click="textareaAction='Message sent'">
          Send message
        </button>
      </div>

      <div dir="rtl" lang="ar" class="field">
        <label for="docs-textarea-rtl">رسالتك</label>
        <textarea
          id="docs-textarea-rtl"
          ng-model="rtlMessage"
          placeholder="اكتب رسالتك هنا."
        ></textarea>
        <p>سيتم إرسال رد إلى بريدك الإلكتروني.</p>
      </div>

      <output class="output textarea-output">
        Message: {{ message ? message : "empty" }} · {{ textareaAction }}
      </output>
    </main>
  </body>
</html>

Installation

Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.

This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native textarea behavior and AngularTS models.

Anatomy

Root styling selector

  • textarea

Semantic structure

Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.

API

Attributes and state

AttributeAccessPurpose
aria-invalidAuthoredValidation state exposed to assistive technology and CSS.
disabledAuthoredDisables native or component interaction.
requiredAuthoredMarks a native form value as required.

Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.

CSS custom properties

This styling hook does not define component-specific CSS custom properties.

DOM events

This component does not emit a component-specific custom event.

Native DOM events continue to work normally. AngularTS event directives such as ng-click and ng-keydown, plus the data-change model callback, remain application-owned.

Behavior

Native textarea behavior and AngularTS models. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.

AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.

Accessibility

Associate every control with a visible label. Preserve native required, disabled, and invalid semantics, and connect help or error text with aria-describedby.

Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.

Customization

Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.

Read Customization for layer order, design tokens, state variants, and iframe demo isolation.


Last modified September 11, 2026: Finalize AngularCSS 0.0.2 release validation (665eaa7)