email-organizer/offline-docs/daisyui/join.md

daisyUI Documentation - Join Component

Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.

Classes and Usage

Core Classes:

• join - For grouping multiple items
• join-item - Item inside join. Can be a button, input, etc.
• join-vertical - Show items vertically
• join-horizontal - Show items horizontally

Examples

Basic Join

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

Group Items Vertically

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

Responsive Join (Vertical on small, horizontal on large)

<div class="join join-vertical lg:join-horizontal">
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
</div>

Join with Extra Elements

Even if join-item is not a direct child of the group, it still gets the style

<div class="join">
  <div>
    <div>
      <input class="input join-item" placeholder="Search" />
    </div>
  </div>
  <select class="select join-item">
    <option disabled selected>Filter</option>
    <option>Sci-fi</option>
    <option>Drama</option>
    <option>Action</option>
  </select>
  <div class="indicator">
    <span class="indicator-item badge badge-secondary">new</span>
    <button class="btn join-item">Search</button>
  </div>
</div>

Custom Border Radius

<div class="join">
  <input class="input join-item" placeholder="Email" />
  <button class="btn join-item rounded-r-full">Subscribe</button>
</div>

Join Radio Inputs with Button Style

<div class="join">
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 1" />
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 2" />
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 3" />
</div>

Features

• Groups multiple items together
• Applies border radius to first and last items
• Horizontal or vertical layout options
• Responsive design
• Works with buttons, inputs, selects, and other elements
• Customizable with Tailwind classes

This component is useful for creating grouped interfaces like button groups, input fields with buttons, or any set of related UI elements that should appear as a cohesive unit.