Text area

Text Area

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="uniquieID-textarea">Give us your feedback</label>
            <textarea class="ds-textarea" id="uniquieID-textarea" rows="8" placeholder="Your feedback"></textarea>
        </div>

    </form>

</div>

Required

draft

Add required attribute to input and <abbr class="ds-label__required" title="required">*</abbr> tag after label text

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="uniquieID-textarea">Give us your feedback <abbr class="ds-label__required" title="required">*</abbr></label>
            <textarea class="ds-textarea" id="uniquieID-textarea" rows="8" placeholder="Your feedback" required></textarea>
        </div>

    </form>

</div>

Hint Text

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="uniquieID-textarea">Give us your feedback</label>
            <textarea class="ds-textarea" id="uniquieID-textarea" rows="8" placeholder="Your feedback"  aria-describedby="textarea-hint"></textarea>
            <small class="ds-hint" id="textarea-hint">We'll never share your details with anyone else.</small>
        </div>

    </form>

</div>

Disabled

draft

Disabled input elements are unusable and can not be clicked. This prevents a user from interacting with the input element until another action is complete. Disabled input elements in a form will not be submitted.

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="uniquieID-textarea">Give us your feedback</label>
            <textarea class="ds-textarea" id="uniquieID-textarea" rows="8" placeholder="Your feedback" disabled></textarea>
        </div>

    </form>

</div>

Read only

draft

Read only field cannot be edited by the user. Its value can, however, still be changed by JavaScript. Read only input elements in a form will be submitted.

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="uniquieID-textarea">Give us your feedback</label>
            <textarea class="ds-textarea" id="uniquieID-textarea" rows="8" placeholder="Your feedback" readonly></textarea>
        </div>

    </form>

</div>

Invalid

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="uniquieID-textarea">Give us your feedback</label>
            <textarea class="ds-textarea ds-text-input--invalid" id="uniquieID-textarea" rows="8" placeholder="Your feedback" aria-describedby="textarea-hint"></textarea>
            <small class="ds-hint" id="textarea-hint">We'll never share your details with anyone else.</small>
            <small class="ds-hint ds-hint--invalid" id="text-valid-text">Valid message</small>
        </div>

    </form>

</div>

Valid

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="uniquieID-textarea">Give us your feedback</label>
            <textarea class="ds-textarea ds-text-input--valid" id="uniquieID-textarea" rows="8" placeholder="Your feedback" aria-describedby="textarea-hint"></textarea>
            <small class="ds-hint" id="textarea-hint">We'll never share your details with anyone else.</small>
            <small class="ds-hint ds-hint--valid">Valid message</small>
        </div>

    </form>

</div>