{{#> web/layout/default title="Text Area" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea">
        <label for="text-area-default" class="TextArea__label">Label</label>
        <textarea id="text-area-default" class="TextArea__input" name="default" placeholder="Placeholder"></textarea>
      </div>

      <div class="TextArea">
        <label for="text-area-filled" class="TextArea__label">Label</label>
        <textarea id="text-area-filled" class="TextArea__input" name="defaultFilled" placeholder="Placeholder">Filled</textarea>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Required</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea">
        <label for="text-area-required" class="TextArea__label TextArea__label--required">Label</label>
        <textarea id="text-area-required" class="TextArea__input" name="required" placeholder="Placeholder" required></textarea>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Hidden Label</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea">
        <label for="text-area-hidden-label" class="TextArea__label TextArea__label--hidden">Hidden Label</label>
        <textarea id="text-area-hidden-label" class="TextArea__input" name="hiddenLabel" placeholder="Placeholder"></textarea>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Helper Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea">
        <label for="text-area-helper-text" class="TextArea__label">Label</label>
        <textarea id="text-area-helper-text" class="TextArea__input" name="helperText" placeholder="Placeholder"></textarea>
        <div class="TextArea__helperText">Helper text</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Disabled</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea TextArea--disabled">
        <label for="text-area-disabled" class="TextArea__label">Label</label>
        <textarea id="text-area-disabled" class="TextArea__input" name="disabled" placeholder="Placeholder" disabled></textarea>
      </div>

      <div class="TextArea TextArea--disabled">
        <label for="text-area-disabled-filled" class="TextArea__label TextArea__label--required">Label</label>
        <textarea id="text-area-disabled-filled" class="TextArea__input" name="disabledFilled" disabled required>Filled</textarea>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Validation State with Validation Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea TextArea--success">
        <label for="text-area-success" class="TextArea__label">Label</label>
        <textarea id="text-area-success" class="TextArea__input" name="success" placeholder="Placeholder">Filled</textarea>
      </div>

      <div class="TextArea TextArea--warning">
        <label for="text-area-warning" class="TextArea__label">Label</label>
        <textarea id="text-area-warning" class="TextArea__input" name="warning" placeholder="Placeholder">Filled</textarea>
        <div class="TextArea__validationText">Validation text</div>
      </div>

      <div class="TextArea TextArea--danger">
        <label for="text-area-danger" class="TextArea__label">Label</label>
        <textarea id="text-area-danger" class="TextArea__input" name="danger" placeholder="Placeholder">Filled</textarea>
        <div class="TextArea__validationText">
          <ul>
            <li>Validation text</li>
            <li>Second validation text</li>
          </ul>
        </div>
      </div>

      <div class="TextArea TextArea--danger">
        <label for="text-area-danger-with-helper-text" class="TextArea__label TextArea__label--required">Label</label>
        <textarea id="text-area-danger-with-helper-text" class="TextArea__input" placeholder="Placeholder" name="dangerWithHelperText" required>Filled</textarea>
        <div class="TextArea__helperText">This is helper text</div>
        <div class="TextArea__validationText">Danger validation text</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Fluid</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea TextArea--fluid">
        <label for="text-area-fluid" class="TextArea__label">Label</label>
        <textarea id="text-area-fluid" class="TextArea__input" name="fluid" placeholder="Placeholder">Filled</textarea>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Inline</h2>

    <div class="docs-Stack docs-Stack--start">

      <div style="display: flex; gap: 1rem; align-items: flex-start">
        <div class="TextArea">
          <label for="text-area-inline" class="TextArea__label TextArea__label--hidden">Hidden Label</label>
          <textarea id="text-area-inline" class="TextArea__input" name="inline" placeholder="Placeholder">Filled</textarea>
        </div>
        <button type="button" class="Button Button--primary Button--medium">Button</button>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">AutoResize</h2>

    <div class="docs-Stack docs-Stack--start">

      <div class="TextArea" data-spirit-toggle="autoResize">
        <label for="text-area-auto-resize" class="TextArea__label">Label</label>
        <textarea id="text-area-auto-resize" class="TextArea__input" name="autoResize"></textarea>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}