<a id="join"></a>

## Join  
**Category**: Layout
Group elements with connected borders
### Examples

#### Horizontal Join  
```python
Div(
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    cls='join'
)
```

#### With Form Elements  
```python
Div(
    Div(            
        Input(placeholder='Search', cls='input join-item'),            
    ),
    Select(
        Option('Filter', disabled=True, selected=True),
        Option('Sci-fi'),
        Option('Drama'),
        Option('Action'),
        cls='select join-item'
    ),
    Div(
        Span('new', cls='indicator-item badge badge-secondary'),
        Button('Search', cls='btn join-item'),
        cls='indicator'
        ),            
    cls='join'
)
```

#### Custom Radius  
```python
Div(
    Input(
        placeholder="Email", 
        cls="input input-bordered join-item w-36 lg:w-52"
    ),
    Button(
        "Subscribe", 
        cls="btn join-item rounded-r-full"
    ),
    cls="join"
)
```

#### Vertical Join  
```python
Div(
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    cls='join join-vertical'
)
```

#### Radio Button Join  
```python
Div(
    Input(type='radio', name='options', aria_label='Radio 1', cls='join-item btn'),
    Input(type='radio', name='options', aria_label='Radio 2', cls='join-item btn'),
    Input(type='radio', name='options', aria_label='Radio 3', cls='join-item btn'),
    cls='join'
)
```

#### Responsive Join  
```python
Div(
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    cls='join join-vertical lg:join-horizontal'
)
```