Join is a versatile component that wraps around a set of elements and joins them together. It replaces traditional component groups like ButtonGroup and InputGroup, offering more flexibility by working with various elements including buttons, inputs, text blocks, and more.
A comparison of joined and non-joined buttons using the Join component.
The Join components include the following:
The Join component wraps around a set of elements and joins them together. It replaces traditional component groups like ButtonGroup and InputGroup, offering more flexibility by working with various elements including buttons, inputs, text blocks, and more.
| Join Props | Type | Description |
|---|---|---|
vertical | boolean | When set to true, joins elements vertically instead of the default horizontal layout. |
| Join Slots | Description |
|---|---|
default | The default slot. Content to be joined together. Child elements should have the |
The Button component can be used as a join item by adding the join prop.
| Button Props | Type | Description |
|---|---|---|
join | boolean | Makes the button work as a join item when placed inside a |
The FileInput component can be used as a join item by adding the join prop.
| FileInput Props | Type | Description |
|---|---|---|
join | boolean | Makes the file input work as a join item when placed inside a |
The Input component can be used as a join item by adding the join prop.
| Input Props | Type | Description |
|---|---|---|
join | boolean | Makes the input work as a join item when placed inside a |
The Flex component can be used as a join item by adding the join prop.
| Flex Props | Type | Description |
|---|---|---|
join | boolean | Makes the flex container work as a join item when placed inside a |
The Select component can be used as a join item by adding the join prop.
| Select Props | Type | Description |
|---|---|---|
join | boolean | Makes the select work as a join item when placed inside a |
The Text component can be used as a join item by adding the join prop.
| Text Props | Type | Description |
|---|---|---|
join | boolean | Makes the text element work as a join item when placed inside a |
The Input component can be used as a join item by adding the join prop.
| Input Props | Type | Description |
|---|---|---|
join | boolean | Makes the text input work as a join item when placed inside a |
Joining multiple buttons together horizontally.
Joining an input and a button together.
Joining a select element and a button together.
As of DaisyUI Kit v5.0.0, the Label component has a new input slot that allows you to place an input element inside a label. This is preferred over the Join component.
Text around an input is better done using the Label component with the input slot.
Input with text is better done using the Label component with the input slot.
This is a mix of the Join component and the Label component with the input prop.