Components

Text Area(SCSS)

Multiline inputs for text.

Version:	`4.0.3` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-scss`

Basic Text Area example

Business description

</div><div class="br2 bg-gray-200 mb4 index-module--codeContainer--3cWpa"><pre class="prism-code language-html index-module--code--1GHaX index-module--codeHTML--2h4fm" style="color:#2f3033;background-color:#fafafa"><div class="token-line" style="color:#2f3033"><span class="token tag punctuation" style="color:#005979;opacity:0.7"><</span><span class="token tag" style="color:#005979">label</span><span class="token tag" style="color:#005979"> </span><span class="token tag attr-name" style="color:#383c80">class</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">=</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag attr-value" style="color:#005979">tp-label</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag" style="color:#005979"> </span><span class="token tag attr-name" style="color:#383c80">for</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">=</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag attr-value" style="color:#005979">example-basic-text-area</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag punctuation" style="color:#005979;opacity:0.7">></span><span class="token plain">Business description</span><span class="token tag punctuation" style="color:#005979;opacity:0.7"></</span><span class="token tag" style="color:#005979">label</span><span class="token tag punctuation" style="color:#005979;opacity:0.7">></span><span class="token plain"></span></div><div class="token-line" style="color:#2f3033"><span class="token plain"></span><span class="token tag punctuation" style="color:#005979;opacity:0.7"><</span><span class="token tag" style="color:#005979">textarea</span><span class="token tag" style="color:#005979"></span></div><div class="token-line" style="color:#2f3033"><span class="token tag" style="color:#005979">    </span><span class="token tag attr-name" style="color:#383c80">class</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">=</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag attr-value" style="color:#005979">tp-textarea</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag" style="color:#005979"></span></div><div class="token-line" style="color:#2f3033"><span class="token tag" style="color:#005979">    </span><span class="token tag attr-name" style="color:#383c80">id</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">=</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag attr-value" style="color:#005979">example-basic-text-area</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag" style="color:#005979"></span></div><div class="token-line" style="color:#2f3033"><span class="token tag" style="color:#005979">    </span><span class="token tag attr-name" style="color:#383c80">placeholder</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">=</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag attr-value" style="color:#005979">Tell us about your business</span><span class="token tag attr-value punctuation" style="color:#005979;opacity:0.7">"</span><span class="token tag" style="color:#005979"></span></div><div class="token-line" style="color:#2f3033"><span class="token tag" style="color:#005979"></span><span class="token tag punctuation" style="color:#005979;opacity:0.7">/></span></div></pre></div></div></div><span style="font-size:0"></span><div class="index-module--hashAnchor--S2ISv"><a href="#section-text-area-with-an-error" aria-hidden="true" class="index-module--hashAnchorLink--3fJqc"><svg aria-hidden="true" viewBox="0 0 16 16" height="16" width="16" fill="#676d73"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><h2 class="index-module--title3--mxLQf mt6 mb3" id="section-text-area-with-an-error">Text Area with an error</h2></div><p class="index-module--text1--RFDWD mb3 black-300 index-module--readingWidth--2YZCj">The <code style="font-family:'Source Code Pro', monospace;font-size:95%;background:#f5f7f7;padding:1px 4px;color:#2f3033;border-radius:5px">tp-textarea--bad-news</code> class only changes the textarea’s color. It should be used alongside an error message that helps users advance through the form.</p><div><div><div class="pa4 mb1 ba bw-2 br2 index-module--preview--10DiI bg-white b-gray-300"><textarea
    class="tp-textarea tp-textarea--bad-news"
    placeholder="Tell us about your business"
>

<label class="tp-label" for="example-basic-text-area">Business description</label>
<textarea
    class="tp-textarea"
    id="example-basic-text-area"
    placeholder="Tell us about your business"
/>

Text Area with an error

The tp-textarea--bad-news class only changes the textarea’s color. It should be used alongside an error message that helps users advance through the form.

<textarea
    class="tp-textarea tp-textarea--bad-news"
    placeholder="Tell us about your business"
></textarea>