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

# Join Component

Połącz komponenty, grupując sąsiadujące ze sobą elementy, usuwając odstępy i łącząc krawędzie pomiędzy elementami. System łączenia Frutjam tworzy spójne grupy przycisków, podzielone na segmenty elementy sterujące i kombinacje wejść. Obsługuje wiele kierunków i płynnie współpracuje z przyciskami, wejściami i elementami wyboru w celu uzyskania profesjonalnych układów formularzy i grup kontrolnych.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa           | Typ         | Opis                                                |
| --------------- | ----------- | --------------------------------------------------- |
| join            | Opierać     | Grupuje elementy podrzędne, łącząc ich obramowania  |
| join-item       | Modyfikator | Element podrzędny uczestniczący w grupie dołączania |
| join-horizontal | Modyfikator | Układ poziomy (domyślny)                            |
| join-vertical   | Modyfikator | Pionowy układ skumulowany                           |

## Podstawowe użycie

## Dołącz do wskazówek

Kontroluj orientację układu zgrupowanych elementów za pomocą kierunkowych klas użyteczności.

### Połączenie poziome

Domyślny układ obok siebie kontrolek i grup przycisków.

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

### Połączenie pionowe

Układa **łączone elementy** w pionie, co idealnie sprawdza się w przypadku pasków bocznych lub nawigacji na urządzeniach mobilnych.

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

### Responsywne dołączenie

Automatycznie przełączaj się z pionowego stosu na urządzeniu mobilnym do poziomego rzędu na komputerze za pomocą **.join-vertical** i **.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>
```

## Zgrupowane wejścia

Bezproblemowo łącz wprowadzany tekst z przyciskami lub ikonami, aby tworzyć profesjonalne paski wyszukiwania i formularze subskrypcji.

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

## Grupy przycisków opcji

Zamień standardowe wejścia radiowe w **segmentowaną kontrolkę** lub grupę przełączającą, zawijając je w kontenerze Join z klasami przycisków.

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

## Zgrupowane karty

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