---
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/tr/components/join
---

# Join Component

Bileşenleri birleştirin, aralıkları kaldırarak ve öğeler arasındaki sınırları birleştirerek bitişik öğeleri bir arada gruplayın. Frutjam birleştirme sistemi, uyumlu düğme grupları, bölümlere ayrılmış kontroller ve giriş kombinasyonları oluşturur. Birden çok yönü destekler ve profesyonel form düzenleri ve kontrol grupları için düğmeler, girişler ve seçme öğeleriyle sorunsuz bir şekilde çalışır.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf           | Tip         | Tanım                                                 |
| --------------- | ----------- | ----------------------------------------------------- |
| join            | Temel       | Alt öğeleri kenarlıklarını birleştirerek gruplandırır |
| join-item       | Değiştirici | Birleştirme grubuna katılan alt öğe                   |
| join-horizontal | Değiştirici | Yatay düzen (varsayılan)                              |
| join-vertical   | Değiştirici | Dikey yığılmış düzen                                  |

## Temel Kullanım

## Yol Tariflerine Katılın

Yönsel yardımcı program sınıflarını kullanarak gruplandırılmış öğelerin düzen yönünü kontrol edin.

### Yatay Birleştirme

Yan yana kontroller ve düğme grupları için varsayılan düzen.

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

### Dikey Birleştirme

**Öğeleri dikey olarak birleştirir**; kenar çubukları veya mobil cihazlara özel gezinme için idealdir.

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

### Duyarlı Katılma

**.join-vertical** ve **.lg:join-horizontal**'ı kullanarak mobil cihazda dikey yığından masaüstünde yatay satıra otomatik olarak geçiş yapın.

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

## Gruplandırılmış Girişler

Profesyonel arama çubukları ve abonelik formları oluşturmak için metin girişlerini düğmeler veya simgelerle sorunsuz bir şekilde birleştirin.

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

## Radyo Düğmesi Grupları

Standart radyo girişlerini **bölümlere ayrılmış bir kontrole** veya geçiş grubuna dönüştürün ve bunları düğme sınıfları içeren bir Birleştirme kapsayıcısına sarın.

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

## Gruplanmış Kartlar

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