---
title: "Join"
type: component
version: "2.1.2"
doc_version: "2.3.0"
status: stable
date: 2026-03-07
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Join for grouped button controls, segmented inputs, and combined form fields. Merges borders seamlessly in horizontal or vertical layouts."
url: https://frutjam.com/components/join
---

# Join Component

 Join components group adjacent items together by removing spacing and merging borders between elements. The Frutjam join system creates cohesive button groups, segmented controls, and input combinations. Supports multiple directions and works seamlessly with buttons, inputs, and select elements for professional form layouts and control groups.

| Class           | Type     | Description                                       |
| --------------- | -------- | ------------------------------------------------- |
| join            | Base     | Groups child elements by merging their borders    |
| join-item       | Modifier | Child element that participates in the join group |
| join-horizontal | Modifier | Horizontal layout (default)                       |
| join-vertical   | Modifier | Vertical stacked layout                           |

## Basic Usage

## Join Directions

Control the layout orientation of grouped items using directional utility classes.

### Horizontal Join

The default layout for side-by-side controls and button groups.

```html
<div class="join join-horizontal">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>
```


### Vertical Join

Stacks **join items** vertically, ideal for sidebars or mobile-specific navigation.

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


### Responsive Join

Automatically switch from a vertical stack on mobile to a horizontal row on desktop using **.join-vertical** and **.lg:join-horizontal**.

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


## Grouped Inputs

Seamlessly combine text inputs with buttons or icons to create professional search bars and subscription forms.

```html
<div class="join">
    <input class="input input-xs join-item" placeholder="Email" />
    <button class="btn btn-xs join-item">Subscribe</button>
</div>
<div class="join">
    <button class="btn btn-xs join-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
    </button>
    <input type="search" class="input input-xs join-item" placeholder="Search...">
</div>
```


## Radio Button Groups

Turn standard radio inputs into a **segmented control** or toggle group by wrapping them in a Join container with button classes.

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


## Grouped Cards

```html
<div class="join">
<div class="join-item card shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>
<div class="join-item card shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>
</div>
```