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

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <div class="Select">
        <label for="select-simple" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-simple" name="default" class="Select__input">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <div class="Select">
        <label for="select-required" class="Select__label Select__label--required">Label</label>
        <div class="Select__inputContainer">
          <select id="select-required" name="required" class="Select__input" required>
            <option value="" selected>Select an option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </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="Select">
        <label for="select-hidden-label" class="Select__label Select__label--hidden">Label</label>
        <div class="Select__inputContainer">
          <select id="select-hidden-label" name="hiddenLabel" class="Select__input">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

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

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

      <div class="Select">
        <label for="select-placeholder" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-placeholder" name="placeholder" class="Select__input">
            <option value="" selected>Select an option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </div>

      <div class="Select">
        <label for="select-placeholder-disabled" class="Select__label Select__label--required">Label</label>
        <div class="Select__inputContainer">
          <select id="select-placeholder-disabled" name="placeholderDisabled" class="Select__input" required>
            <option value="" selected disabled>Select an option [selected & disabled]</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </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="Select">
        <label for="select-helper-text" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-helper-text" name="helperText" class="Select__input">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
        <div class="Select__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="Select Select--disabled">
        <label for="select-disabled" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-disabled" name="disabled" class="Select__input" disabled>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </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="Select Select--success">
        <label for="select-success" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-success" name="success" class="Select__input">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </div>

      <div class="Select Select--warning">
        <label for="select-warning" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-warning" name="warning" class="Select__input">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
        <div class="Select__validationText">Validation text</div>
      </div>

      <div class="Select Select--danger">
        <label for="select-danger" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-danger" name="danger" class="Select__input">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
        <div class="Select__validationText">
          <ul>
            <li>First validation text</li>
            <li>Second validation text</li>
          </ul>
        </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="Select Select--fluid">
        <label for="select-fluid" class="Select__label">Label</label>
        <div class="Select__inputContainer">
          <select id="select-fluid" name="default" class="Select__input">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </select>
          <div class="Select__icon">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
            </svg>
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}