---
title: Join
desc: A utility that allows you to join two or more elements together. This looks best when the items have borders or background colors.
ico: mdi:format-horizontal-align-center
keywords:
  - combine
  - group
  - utility

props:
  - class: .prs-join
    type: component
    desc: Container
  - class: .prs-join-vertical
    type: modifier
    desc: Stacked
  - class: .prs-join-item
    type: part
    desc: Child container

controls:
  - name: orientation
    type: radio
    label: Orientation
    desc: Horizontal or vertical.
    default: horizontal
    options:
      - horizontal
      - vertical
  - name: complex
    type: toggle
    label: Complex example
    desc: Input/form example. Please make sure that if you use this, your container can shrink down below 320px for smaller screens.
    default: false

preview: |
  <div
    x-show="!complex"
    :class="{
      'prs-join-vertical': orientation === 'vertical',
    }"
    class="prs-join"
    style="display: none;"
  >
    <button class="prs-btn prs-btn-secondary prs-btn-square prs-join-item"><iconify-icon icon="mdi:format-align-left" noobserver></iconify-icon></button>
    <button class="prs-btn prs-btn-secondary prs-btn-square prs-join-item"><iconify-icon icon="mdi:format-align-center" noobserver></iconify-icon></button>
    <button class="prs-btn prs-btn-secondary prs-btn-square prs-join-item"><iconify-icon icon="mdi:format-align-right" noobserver></iconify-icon></button>
  </div>

  <div
    x-show="complex"
    :class="{
      'prs-join-vertical': orientation === 'vertical',
    }"
    class="prs-join mx-auto w-screen max-w-xs"
    style="display: none;"
  >
    <div>
      <label><input type="search" class="prs-input prs-join-item" placeholder="Search" aria-label="Search query" /></label>
    </div>
    <label>
      <select class="prs-input prs-select prs-join-item w-auto" :class="orientation === 'horizontal' && 'max-w-[6.25rem]'" aria-label="Filter option">
        <option disabled selected>Filter</option>
        <option>Title</option>
        <option>Genre</option>
      </select>
    </label>
    <button class="prs-btn prs-btn-primary prs-join-item" :class="orientation === 'horizontal' && 'prs-btn-square'" aria-label="Search">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img">
        <use href="/_assets/prs-icons.svg#nav-search" />
      </svg>
    </button>
  </div>

code:
  html: |
    {simple}{complex}
  logic:
    simple: "!this.complex ? '<div class=\"prs-join{orientation}\">\\n  <button class=\"prs-join-item prs-btn prs-btn-secondary prs-btn-square\">...</button>\\n  <button class=\"prs-join-item prs-btn prs-btn-secondary prs-btn-square\">...</button>\\n  <button class=\"prs-join-item prs-btn prs-btn-secondary prs-btn-square\">...</button>\\n</div>' : ''"
    complex: "this.complex ? '
      <div class=\"prs-join{orientation}\">
        \\n  <div>
          \\n    <label aria-label=\"Search\"><input type=\"search\" class=\"prs-join-item prs-input\" /></label>
        \\n  </div>
        \\n  <label aria-label=\"Filter\">
          \\n    <select class=\"prs-join-item prs-input prs-select\">
            \\n      <option disabled selected>Filter</option>
            \\n      <option>Title</option>
            \\n      <option>Genre</option>
          \\n    </select>
        \\n  </label>
        \\n  <button class=\"prs-join-item prs-btn prs-btn-primary\">...</button>
      \\n</div>
    ' : ''"
    orientation: "this.orientation === 'vertical' ? ' prs-join-vertical' : ''"
---