• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Text area

Component status
Contribution
Current version@spectrum-css/textfield@7.2.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/textfield@8.0.0-s2-foundations.14
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

A multi-line text field using the <textarea> element.

Variants

Standard Sizes
Contribution

50
50/50 characters remaining
50
50/50 characters remaining
50
50/50 characters remaining
50
50/50 characters remaining
Show markup
<div class="spectrum-Textfield spectrum-Textfield--sizeS spectrum-Textfield--multiline">
  <label for="textfield-s" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Tell us your story</label>
  <span id="character-count-1" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-s" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-1 character-count-1"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeS spectrum-HelpText--neutral">
    <div id="helptext-1" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--sizeM spectrum-Textfield--multiline">
  <label for="textfield-m" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Tell us your story</label>
  <span id="character-count-2" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-m" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-2 character-count-2"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
    <div id="helptext-2" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--sizeL spectrum-Textfield--multiline">
  <label for="textfield-l" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Tell us your story</label>
  <span id="character-count-3" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-l" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-3 character-count-3"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeL spectrum-HelpText--neutral">
    <div id="helptext-3" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--sizeXL spectrum-Textfield--multiline">
  <label for="textfield-xl" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Tell us your story</label>
  <span id="character-count-4" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-xl" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-4 character-count-4"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeXL spectrum-HelpText--neutral">
    <div id="helptext-4" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

Textfield with Help Text
Contribution

Tags must be comma separated.
Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <label for="textfield-helptext" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Tags</label>
  <textarea id="textfield-helptext" name="field" class="spectrum-Textfield-input" aria-describedby="helptext-5"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
    <div id="helptext-5" class="spectrum-HelpText-text">Tags must be comma separated.</div>
  </div>
</div>

With Character Count
Contribution

50
Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <label for="textfield-character-count" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <span id="character-count-5" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-character-count" name="field" class="spectrum-Textfield-input" aria-describedby="character-count-5"></textarea>
</div>

Textfield with Side Label
Contribution

50
50/50 characters remaining
Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--sideLabel">
  <label for="textfield-m-sidelabel" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <span id="character-count-6" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-m-sidelabel" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-6 character-count-6"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
    <div id="helptext-6" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

Disabled
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-disabled">
  <label for="textarea-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-disabled" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+" disabled></textarea>
</div>

Valid
Contribution

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

Valid (disabled)
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-valid is-disabled">
  <label for="textarea-valid-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea id="textarea-valid-disabled" name="field"  class="spectrum-Textfield-input" required disabled>A valid input</textarea>
</div>

Invalid
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_N.svg icon in the Express workflow icon set.

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid">
  <label for="textarea-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea--invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

Invalid (disabled)
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-disabled">
  <label for="textarea-invalid-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-invalid-disabled" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" disabled>Invalid input</textarea>
</div>

Focused
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-focused">
  <label for="textarea-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-focused" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Keyboard Focused
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-keyboardFocused">
  <label for="textarea-keyboard-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-keyboard-focused" name="field" class="spectrum-Textfield-input"></textarea>
</div>

Focused (invalid)
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_N.svg icon in the Express workflow icon set.

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

Keyboard Focused (invalid)
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_N.svg icon in the Express workflow icon set.

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-keyboardFocused">
  <label for="textarea-keyboard-focused-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-keyboard-focused-invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

Quiet
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet">
  <label for="textarea-quiet" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+"></textarea>
</div>

Quiet Disabled
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-disabled">
  <label for="textarea-quiet-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet-disabled" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+" disabled></textarea>
</div>

Quiet Valid
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_N.svg icon in the Express workflow icon set.

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

Quiet Valid (disabled)
Contribution

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

Quiet Invalid
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_N.svg icon in the Express workflow icon set.

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

Quiet Invalid (disabled)
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-disabled">
  <label for="textarea-quiet-invalid-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-quiet-invalid-disabled" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" disabled>Invalid input</textarea>
</div>

Quiet Focused
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-focused">
  <label for="textarea-quiet-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet-focused" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+"></textarea>
</div>

Quiet Keyboard Focused
Contribution

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-keyboardFocused">
  <label for="textarea-quiet-keyboard-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet-keyboard-focused" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+"></textarea>
</div>

Quiet Focused (invalid)
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_N.svg icon in the Express workflow icon set.

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

Quiet Keyboard Focused (invalid)
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_N.svg icon in the Express workflow icon set.

Show markup
<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-keyboardFocused">
  <label for="textarea-quiet-keyboard-focused-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-quiet-keyboard-focused-invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

Migration Guide

See the Textfield migration guide for migration information.