[ctrl+alt+n]

Nice browser. Is it antique?

No, seriously - your browser is so old that some features of patternplate don't work as expected.

Don't worry - you can either continue with a restricted version or install an up-to-date browser.

We messed up.

Sorry, but your user experience might be affected.

- Try reloading the page

- Report the problem at github.com/patternplate/patternplate

Text Area@1.0.0

<!-- resting state -->
<!-- HACK NOTE: remove the inline style for width when using this component -->
<div class="c-text-area" style="width: 320px;">
    <textarea 
        class="c-text-area__control" 
        type="text" 
        id="ta-box"
        rows="8"
        cols="40" 
    ></textarea>
    <label for="ta-box" class="c-text-area__label">Text area</label>
</div>

<!-- dirty state -->
<!-- HACK NOTE: remove the inline style for width when using this component -->
<div class="c-text-area" style="width: 320px;">
    <textarea 
        class="c-text-area__control" 
        type="text" 
        id="ta-box-dirty"
        rows="8"
        cols="40" 
    >Bacon ipsum dolor amet ribeye corned beef tail venison pastrami short ribs. Rump kielbasa turkey chuck porchetta cow.</textarea>
    <label for="ta-box-dirty" class="c-text-area__label is-dirty">Text area</label>
</div>

<!-- error state -->
<!-- HACK NOTE: remove the inline style for width when using this component -->
<div class="c-text-area" style="width: 320px;">
    <textarea 
        class="c-text-area__control has-error" 
        type="text" 
        id="ta-box-dirty"
        rows="8"
        cols="40" 
    >Bacon ipsum dolor amet ribeye corned beef tail venison pastrami short ribs. Rump kielbasa turkey chuck porchetta cow.</textarea>
    <label for="ta-box-dirty" class="c-text-area__label is-dirty has-error">Text area</label>
</div>