---
title: "Join"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/id/components/join
---

# Join Component

Gabungkan komponen, kelompokkan item yang berdekatan dengan menghilangkan spasi dan menggabungkan batas antar elemen. Sistem gabungan Frutjam menciptakan grup tombol yang kohesif, kontrol tersegmentasi, dan kombinasi input. Mendukung berbagai arah dan bekerja secara lancar dengan tombol, input, dan elemen pilihan untuk tata letak formulir profesional dan grup kontrol.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas           | Jenis    | Keterangan                                                  |
| --------------- | -------- | ----------------------------------------------------------- |
| join            | Basis    | Mengelompokkan elemen turunan dengan menggabungkan batasnya |
| join-item       | Pengubah | Elemen anak yang berpartisipasi dalam grup gabung           |
| join-horizontal | Pengubah | Tata letak horizontal (default)                             |
| join-vertical   | Pengubah | Tata letak bertumpuk vertikal                               |

## Penggunaan Dasar

## Bergabunglah dengan Arah

Kontrol orientasi tata letak item yang dikelompokkan menggunakan kelas utilitas terarah.

### Gabung Horisontal

Tata letak default untuk kontrol berdampingan dan grup tombol.

```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>
```

### Gabung Vertikal

Tumpukan **menggabungkan item** secara vertikal, ideal untuk sidebar atau navigasi khusus seluler.

```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>
```

### Gabung Responsif

Beralih secara otomatis dari tumpukan vertikal di perangkat seluler ke baris horizontal di desktop menggunakan **.join-vertical** dan **.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>
```

## Masukan yang Dikelompokkan

Gabungkan input teks dengan tombol atau ikon secara mulus untuk membuat bilah pencarian profesional dan formulir berlangganan.

```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>
```

## Grup Tombol Radio

Ubah input radio standar menjadi **kontrol tersegmentasi** atau beralih grup dengan menggabungkannya dalam wadah Gabung dengan kelas tombol.

```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>
```

## Kartu yang Dikelompokkan

```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>
```