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

# Join Component

Les composants de jointure regroupent les éléments adjacents en supprimant l’espacement et en fusionnant les bordures entre les éléments. Le système de jointure Frutjam crée des groupes de boutons cohérents, des commandes segmentées et des combinaisons d'entrées. Prend en charge plusieurs directions et fonctionne de manière transparente avec les boutons, les entrées et les éléments de sélection pour les mises en page de formulaires professionnels et les groupes de contrôle.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe          | Taper        | Description                                                |
| --------------- | ------------ | ---------------------------------------------------------- |
| join            | Base         | Regroupe les éléments enfants en fusionnant leurs bordures |
| join-item       | Modificateur | Élément enfant qui participe au groupe de jointure         |
| join-horizontal | Modificateur | Disposition horizontale (par défaut)                       |
| join-vertical   | Modificateur | Disposition empilée verticale                              |

## Utilisation de base

## Rejoindre les directions

Contrôlez l'orientation de la présentation des éléments groupés à l'aide de classes utilitaires directionnelles.

### Jointure horizontale

La disposition par défaut pour les contrôles côte à côte et les groupes de boutons.

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

### Jointure verticale

Empile les **éléments de jointure** verticalement, idéal pour les barres latérales ou la navigation spécifique aux mobiles.

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

### Rejoindre réactif

Passez automatiquement d'une pile verticale sur mobile à une ligne horizontale sur ordinateur à l'aide de **.join-vertical** et **.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>
```

## Entrées groupées

Combinez facilement des saisies de texte avec des boutons ou des icônes pour créer des barres de recherche et des formulaires d'abonnement professionnels.

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

## Groupes de boutons radio

Transformez les entrées radio standard en un **contrôle segmenté** ou en un groupe à bascule en les enveloppant dans un conteneur Join avec des classes de boutons.

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

## Cartes groupées

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