Textarea

The Textarea component provides semantic multiline text input with lightweight styling and accessible interactions.

Ignix Lite textareas support validation states, intent variants, disabled states, and flexible sizing.

---

Row Variants

Preview

2 Rows

4 Rows

6 Rows

Code

<textarea rows="2"></textarea>

<textarea rows="4"></textarea>

<textarea rows="6"></textarea>

---

Color Variants

Preview

Primary

Success

Warning

Danger

Code

<textarea
  rows="3"
  data-intent="primary"
></textarea>

<textarea
  rows="3"
  data-intent="success"
></textarea>

<textarea
  rows="3"
  data-intent="warning"
></textarea>

<textarea
  rows="3"
  data-intent="danger"
></textarea>

---

Validation States

Preview

Required

Invalid

Disabled

Code

<textarea
  rows="3"
  required
></textarea>

<textarea
  rows="3"
  aria-invalid="true"
></textarea>

<textarea
  rows="3"
  disabled
></textarea>

Usage

Preview

Product Feedback

Help us improve your experience by sharing detailed feedback.

Feedback

Code

<article>

  <h3>
    Product Feedback
  </h3>

  <p>
    Help us improve your experience by sharing detailed feedback.
  </p>

  <label>
    Feedback

    <textarea
      rows="5"
      placeholder="Write your feedback..."
    ></textarea>
  </label>

</article>

---

Attributes

Attribute	Type	Description
rows	number	Controls textarea height
placeholder	string	Placeholder text
disabled	boolean	Disabled state
required	boolean	Required field
aria-invalid	boolean	Invalid state
data-intent	'primary' | 'success' | 'warning' | 'danger'	Semantic intent styling