causeway-standard-theme/causeway/docs/components/form-fields/textarea-input.html

<div>
  <a id="forms-textarea"></a>
  <header class="content-header">
    <h1 class="title">
      Textarea
    </h1>
  </header>

  <p>
    Textarea controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code>&lt;textarea&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
  </p>
  <div class="table-wrapper">
    <table class="table table-striped">
    <thead>
      <tr>
        <th>
          Style
        </th>
        <th>
          Attribute
        </th>
        <th>
          Value
        </th>
        <th>
          Standard Example
        </th>
        <th>
          Inline Example
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="5">
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          Standard
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <label for="textarea-field1a" class="control-label">Text:</label>
                <div class="control-input">
                  <textarea class="form-control" rows="5" id="textarea-field1a" name="textarea_field1a" placeholder="Enter text"></textarea>
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group">
                <label class="sr-only" for="inline-textarea-field1a">Text:</label>
                <textarea class="form-control" rows="5" id="inline-textarea-field1a" name="inline_textarea_field1a" placeholder="Enter text"></textarea>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled
        </td>
        <td>
          class
          <br/><br/>
          disabled
        </td>
        <td>
          disabled
          <br/><br/>
          disabled
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group disabled">
                <label for="textarea-field1b" class="control-label">Text:</label>
                <div class="control-input">
                  <textarea class="form-control" rows="5" disabled="disabled" id="textarea-field1b" name="textarea_field1b" placeholder="Enter text"></textarea>
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group disabled">
                <label class="sr-only" for="inline-textarea-field1b">Text:</label>
                <textarea class="form-control" rows="5" disabled="disabled" id="inline-textarea-field1b" name="inline_textarea_field1b" placeholder="Enter text"></textarea>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Invalid
        </td>
        <td>
          class
        </td>
        <td>
          invalid
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group invalid">
                <label for="textarea-field1c" class="control-label">Text:</label>
                <div class="control-input">
                  <textarea class="form-control" rows="5" id="textarea-field1c" name="textarea_field1c" placeholder="Enter text"></textarea>
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group invalid">
                <label class="sr-only" for="inline-textarea-field1c">Text:</label>
                <textarea class="form-control" rows="5" id="inline-textarea-field1c" name="inline_textarea_field1c" placeholder="Enter text"></textarea>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Read Only
        </td>
        <td>
          class
          <br/><br/>
          readonly
        </td>
        <td>
          readonly
          <br/><br/>
          readonly
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group readonly">
                <label for="textarea-field1d" class="control-label">Text:</label>
                <div class="control-input">
                  <textarea class="form-control readonly" readonly="readonly" id="textarea-field1d" name="textarea_field1d" placeholder="Enter text">example</textarea>
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group readonly">
                <label class="sr-only" for="inline-textarea-field1d">Text:</label>
                <textarea class="form-control readonly" readonly="readonly" id="inline-textarea-field1d" name="inline_textarea_field1d" placeholder="Enter text">example</textarea>
              </div>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <pre>
<code>
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;&lt;!-- Textarea control ID goes here --&gt;&quot;&gt;&lt;!-- Label text goes here --&gt;:&lt;/label&gt;
    &lt;textarea class=&quot;form-control&quot; rows=&quot;5&quot; id=&quot;&lt;!-- Textarea control ID goes here --&gt;&quot; name=&quot;&lt;!-- Textarea control name goes here --&gt;&quot; placeholder=&quot;Enter text&quot;&gt;
      &lt;!-- Textarea control value goes here --&gt;
    &lt;/textarea&gt;
  &lt;/div&gt;
</code></pre>
</div>