Form Textarea

Ready

HTML
View
Context
Notes


        
        <form class="form">
    <fieldset>
        <legend class="h3">Textarea Example</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="textarea-sample">Text Area</label>
                    <textarea name="textarea-sample"></textarea>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
    <fieldset>
        <legend class="h3">Textarea State Examples (FPO)</legend>
        <ul class="u-list-unstyled">
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="textarea-hover-sample">Hover State</label>
                    <textarea class="hovered" name="textarea-hover-sample"></textarea>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="textarea-focus-sample">Focus State</label>
                    <textarea class="focused" name="textarea-focus-sample"></textarea>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper">
                    <label for="textarea-disabled-sample">Disabled State</label>
                    <textarea name="textarea-disabled-sample" disabled></textarea>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
            <li class="form__item">
                <div class="input__wrapper has-error">
                    <label for="textarea-error-sample">Error State</label>
                    <textarea name="textarea-error-sample"></textarea>
                    <p class="input__error-message">This is a sample error message.</p>
                </div>
                <!-- /.input__wrapper -->
            </li>
            <!-- /.form__item -->
        </ul>
    </fieldset>
</form>
<!-- /.form -->


        <form class="form">
  <fieldset>
    <legend class="h3">Textarea Example</legend>
    <ul class="u-list-unstyled">
      <li class="form__item">
        <div class="input__wrapper">
          <label for="textarea-sample">Text Area</label>
          <textarea name="textarea-sample"></textarea>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
    </ul>
  </fieldset>
  <fieldset>
    <legend class="h3">Textarea State Examples (FPO)</legend>
    <ul class="u-list-unstyled">
      <li class="form__item">
        <div class="input__wrapper">
          <label for="textarea-hover-sample">Hover State</label>
          <textarea class="hovered" name="textarea-hover-sample"></textarea>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper">
          <label for="textarea-focus-sample">Focus State</label>
          <textarea class="focused" name="textarea-focus-sample"></textarea>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper">
          <label for="textarea-disabled-sample">Disabled State</label>
          <textarea name="textarea-disabled-sample" disabled></textarea>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
      <li class="form__item">
        <div class="input__wrapper has-error">
          <label for="textarea-error-sample">Error State</label>
          <textarea name="textarea-error-sample"></textarea>
          <p class="input__error-message">This is a sample error message.</p>
        </div>
        <!-- /.input__wrapper -->
      </li>
      <!-- /.form__item -->
    </ul>
  </fieldset>
</form>
<!-- /.form -->


        
            
            /* No context defined for this component. */

Usage

The textarea element allows users to enter data into applications and websites. All textarea elements should include the following states:

Hover state
Focus state
Disabled state
Error state

Labelling Expectations

All textarea elements should be associated with a label.

Focus Expectations

All textarea elements should have a visible keyboard focus state.

Keyboard Expectations

Tab = Move to next focusable form element

Screen Reader Expectations

When the input element is focused, screen readers should announce the following:

Input type