# daisyUI Documentation - Join Component

Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.

## Classes and Usage

### Core Classes:
- **join** - For grouping multiple items
- **join-item** - Item inside join. Can be a button, input, etc.
- **join-vertical** - Show items vertically
- **join-horizontal** - Show items horizontally

## Examples

### Basic Join

```html
<div class="join">
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
</div>
```

### Group Items Vertically

```html
<div class="join join-vertical">
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
</div>
```

### Responsive Join (Vertical on small, horizontal on large)

```html
<div class="join join-vertical lg:join-horizontal">
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
</div>
```

### Join with Extra Elements

Even if join-item is not a direct child of the group, it still gets the style

```html
<div class="join">
  <div>
    <div>
      <input class="input join-item" placeholder="Search" />
    </div>
  </div>
  <select class="select join-item">
    <option disabled selected>Filter</option>
    <option>Sci-fi</option>
    <option>Drama</option>
    <option>Action</option>
  </select>
  <div class="indicator">
    <span class="indicator-item badge badge-secondary">new</span>
    <button class="btn join-item">Search</button>
  </div>
</div>
```

### Custom Border Radius

```html
<div class="join">
  <input class="input join-item" placeholder="Email" />
  <button class="btn join-item rounded-r-full">Subscribe</button>
</div>
```

### Join Radio Inputs with Button Style

```html
<div class="join">
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 1" />
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 2" />
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 3" />
</div>
```

## Features

- Groups multiple items together
- Applies border radius to first and last items
- Horizontal or vertical layout options
- Responsive design
- Works with buttons, inputs, selects, and other elements
- Customizable with Tailwind classes

This component is useful for creating grouped interfaces like button groups, input fields with buttons, or any set of related UI elements that should appear as a cohesive unit.