• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Text Area

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/textfield@3.0.3-alpha.0
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

A multi-line text field (aka textarea)

Variants

Standard
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Disabled
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-disabled">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input" disabled></textarea>
</div>

Valid
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-valid">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>A valid input</textarea>
</div>

Valid (disabled)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-valid is-disabled">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required disabled>A valid input</textarea>
</div>

Invalid
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\d]+" required>Invalid input</textarea>
</div>

Invalid (disabled)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-disabled">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" disabled>Invalid input</textarea>
</div>

Focused
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-focused">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Keyboard Focused
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-keyboardFocused">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-focused">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\d]+" required>Invalid input</textarea>
</div>

Keyboard Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-keyboardFocused">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\d]+" required>Invalid input</textarea>
</div>

Quiet
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Quiet Disabled
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-disabled">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input" disabled></textarea>
</div>

Quiet Valid
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-valid">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>A valid input</textarea>
</div>

Quiet Valid (disabled)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-valid is-disabled">
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required disabled>A valid input</textarea>
</div>

Quiet Invalid
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\d]+" required>Invalid input</textarea>
</div>

Quiet Invalid (disabled)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-disabled">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" disabled>Invalid input</textarea>
</div>

Quiet Focused
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-focused">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Quiet Keyboard Focused
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-keyboardFocused">
  <textarea placeholder="Enter your name" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Quiet Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-focused">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\d]+" required>Invalid input</textarea>
</div>

Quiet Keyboard Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-keyboardFocused">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea placeholder="Enter your name" name="field"  class="spectrum-Textfield-input" pattern="[\d]+" required>Invalid input</textarea>
</div>

Migration Guide

See the Textfield migration guide for migration information.

No results found

Try another search term.