---
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/zh-hant/components/join
---

# Join Component

連接組件透過刪除元素之間的間距和合併邊框將相鄰項目組合在一起。 Frutjam 連接系統可建立有凝聚力的按鈕組、分段控制項和輸入組合。支援多個方向，並與專業表單佈局和控制群組的按鈕、輸入和選擇元素無縫協作。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級              | 類型  | 描述                 |
| --------------- | --- | ------------------ |
| join            | 根據  | 透過合併子元素的邊框對子元素進行分組 |
| join-item       | 修飾符 | 參與加入群組的子元素         |
| join-horizontal | 修飾符 | 水平佈局（預設）           |
| join-vertical   | 修飾符 | 垂直堆疊佈局             |

## 基本用法

## 加入路線

使用方向實用程式類別控制分組項目的佈局方向。

### 水平連接

並排控制項和按鈕組的預設佈局。

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

### 垂直連接

垂直堆疊**連接項目**，非常適合側邊欄或特定於行動裝置的導覽。

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

### 響應式加入

使用 **.join-vertical** 和 **.lg:join-horizo​​ntal** 自動從行動裝置上的垂直堆疊切換到桌面上的水平行。

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

## 分組輸入

將文字輸入與按鈕或圖示無縫結合，建立專業的搜尋列和訂閱表單。

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

## 單選按鈕組

透過將標準無線電輸入包裝在帶有按鈕類別的 Join 容器中，將其轉換為**分段控制**或切換群組。

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

## 分組卡片

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