Tailwind CSS Join (Group Items)

Class Name	Type	Description
join	Component	Container for grouping multiple items
join-item	Part	Item inside join. Can be a button, input, etc.
join-vertical	Direction	Show items vertically
join-horizontal	Direction	Show items vertically

Basic example

Default

Basic join elements example.

<div class="join">
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
</div>

Icons

Basic join elements example using icons.

<div class="join">
  <button class="btn btn-soft btn-primary btn-square join-item" aria-label="join"><span class="icon-[tabler--star]"></span></button>
  <button class="btn btn-soft btn-primary btn-square join-item" aria-label="join"><span class="icon-[tabler--star]"></span></button>
  <button class="btn btn-soft btn-primary btn-square join-item" aria-label="join"><span class="icon-[tabler--star]"></span></button>
</div>

Illustrations

Vertical

Group items vertically.

<div class="join join-vertical drop-shadow-sm">
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
</div>

Responsive

it’s vertical on small screen and horizontal on large screen.

<div class="join max-sm:join-vertical">
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
</div>

Multiple elements

Basic join example illustrating the integration of multiple elements.

<div class="join max-w-sm">
  <input class="input join-item" placeholder="Search" />
  <select class="select join-item" aria-label="select">
    <option disabled selected>Filter</option>
    <option>Sci-fi</option>
    <option>Drama</option>
    <option>Action</option>
  </select>
  <button class="btn btn-soft btn-primary join-item">Search</button>
</div>

Pill shape

The default shape of the join can be altered by using TailwindCSS Border Radius utility classes.

You can also join input and dropdown.

To learn more about dropdowns, refer to the Dropdown documentation.

<div class="join">
  <input class="input join-item shrink" placeholder="Email" />
  <div class="dropdown relative inline-flex max-sm:[--placement:bottom-end]">
    <button id="dropdown-input" type="button" class="dropdown-toggle btn btn-soft btn-primary join-item" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
      <span class="hidden sm:block">Dropdown</span>
      <span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
    </button>
    <ul class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-input">
      <li><a class="dropdown-item" href="#">Subscribe</a></li>
      <li><a class="dropdown-item" href="#">Verify</a></li>
    </ul>
  </div>
</div>

FlyonUI