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

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <div class="TextField">
        <label for="text-field-default" class="TextField__label">Label</label>
        <input type="text" id="text-field-default" class="TextField__input" name="default" placeholder="Placeholder" />
      </div>

      <div class="TextField">
        <label for="text-field-filled" class="TextField__label">Label</label>
        <input type="text" id="text-field-filled" class="TextField__input" name="filled" placeholder="Placeholder" value="Filled" />
      </div>

      <div class="TextField">
        <label for="text-field-password" class="TextField__label">Label</label>
        <input type="password" id="text-field-password" class="TextField__input" name="password" placeholder="Placeholder" value="Filled" />
      </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="TextField">
        <label for="text-field-required" class="TextField__label TextField__label--required">Label</label>
        <input type="text" id="text-field-required" class="TextField__input" name="required" placeholder="Placeholder" required />
      </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="TextField">
        <label for="text-field-hidden-label" class="TextField__label TextField__label--hidden">Label</label>
        <input type="text" id="text-field-hidden-label" class="TextField__input" name="hiddenLabel" placeholder="Placeholder" />
      </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="TextField">
        <label for="text-field-helper-text" class="TextField__label">Label</label>
        <input type="text" id="text-field-helper-text" class="TextField__input" name="helperText" placeholder="Placeholder" />
        <div class="TextField__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="TextField TextField--disabled">
        <label for="text-field-disabled" class="TextField__label">Label</label>
        <input type="text" id="text-field-disabled" class="TextField__input" name="disabled" placeholder="Placeholder" disabled />
      </div>

      <div class="TextField TextField--disabled">
        <label for="text-field-disabled-filled" class="TextField__label TextField__label--required">Label</label>
        <input
          type="text"
          id="text-field-disabled-filled"
          class="TextField__input"
          name="disabledFilled"
          placeholder="Placeholder"
          disabled
          required
          value="Filled"
        />
      </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="TextField TextField--success">
        <label for="text-field-success" class="TextField__label">Label</label>
        <input type="text" id="text-field-success" class="TextField__input" name="success" placeholder="Placeholder" value="Filled" />
      </div>

      <div class="TextField TextField--warning">
        <label for="text-field-warning" class="TextField__label">Label</label>
        <input type="text" id="text-field-warning" class="TextField__input" name="warning" placeholder="Placeholder" value="Filled" />
        <div class="TextField__validationText">Validation text</div>
      </div>

      <div class="TextField TextField--danger">
        <label for="text-field-danger" class="TextField__label">Label</label>
        <input type="text" id="text-field-danger" class="TextField__input" name="danger" placeholder="Placeholder" value="Filled" />
        <div class="TextField__validationText">
          <ul>
            <li>Validation text</li>
            <li>Second validation text</li>
          </ul>
        </div>
      </div>

      <div class="TextField TextField--danger">
        <label for="text-field-danger-with-helper-text" class="TextField__label TextField__label--required">Label</label>
        <input
          type="text"
          id="text-field-danger-with-helper-text"
          class="TextField__input"
          name="dangerWithHelperText"
          placeholder="Placeholder"
          value="Filled"
          required
        />
        <div class="TextField__helperText">This is helper text</div>
        <div class="TextField__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="TextField TextField--fluid">
        <label for="text-field-fluid" class="TextField__label">Label</label>
        <input type="text" id="text-field-fluid" class="TextField__input" name="fluid" placeholder="Placeholder" value="Filled" />
      </div>

    </div>

  </div>

</section>


<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <div class="TextField">
        <label for="text-field-size" class="TextField__label">4000 (in Roman numerals)</label>
        <input type="text" size="4" id="text-field-size" class="TextField__input" name="size" placeholder="Placeholder" />
      </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; max-width: 320px;">
        <div class="TextField">
          <label for="text-field-inline" class="TextField__label TextField__label--hidden">Hidden Label</label>
          <input type="text" id="text-field-inline" class="TextField__input" name="inline" placeholder="Placeholder" value="Filled" />
        </div>
        <button type="button" class="Button Button--primary Button--medium">Button</button>
      </div>

      <div style="display: flex; gap: 1rem; align-items: flex-start; max-width: 320px;">
        <div class="TextField">
          <label for="text-field-inline-first" class="TextField__label TextField__label--hidden">Hidden Label</label>
          <input type="text" id="text-field-inline-first" class="TextField__input" name="inlineFirst" placeholder="Placeholder" value="Filled" />
        </div>
        <div class="TextField TextField--danger">
          <label for="text-field-inline-password" class="TextField__label TextField__label--hidden">Hidden Label</label>
          <div class="TextField__passwordToggle">
            <input type="password" id="text-field-inline-password" class="TextField__input" name="inlinePassword" value="1234" />
            <button
              type="button"
              class="TextField__passwordToggle__button"
              role="switch"
              aria-pressed="false"
              aria-label="Show password"
              data-spirit-toggle="password"
            >
            <span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--hidden">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#visibility-on" />
              </svg>
            </span>
              <span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--shown">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#visibility-off" />
              </svg>
            </span>
            </button>
          </div>
          <div class="TextField__validationText">Too short</div>
        </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">Password Toggle</h2>

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

      <div class="TextField">
        <label for="text-field-password-toggle" class="TextField__label">Password Toggle</label>
        <div class="TextField__passwordToggle">
          <input
            type="password"
            id="text-field-password-toggle"
            class="TextField__input"
            name="passwordToggle"
            placeholder="Password must be at least 6 characters long"
          />
          <button
            type="button"
            class="TextField__passwordToggle__button"
            role="switch"
            aria-pressed="false"
            aria-label="Show password"
            data-spirit-toggle="password"
          >
          <span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--hidden">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#visibility-on" />
            </svg>
          </span>
            <span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--shown">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#visibility-off" />
            </svg>
          </span>
          </button>
        </div>
      </div>

      <div class="TextField TextField--disabled">
        <label for="text-field-password-toggle-disabled" class="TextField__label">Password Toggle</label>
        <div class="TextField__passwordToggle">
          <input
            type="password"
            id="text-field-password-toggle-disabled"
            class="TextField__input"
            name="passwordToggleDisabled"
            placeholder="Password must be at least 6 characters long"
            disabled
          />
          <button
            type="button"
            class="TextField__passwordToggle__button"
            role="switch"
            aria-pressed="false"
            aria-label="Show password"
            data-spirit-toggle="password"
            disabled
          >
          <span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--hidden">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#visibility-on" />
            </svg>
          </span>
            <span class="TextField__passwordToggle__icon TextField__passwordToggle__icon--shown">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#visibility-off" />
            </svg>
          </span>
          </button>
        </div>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}