Forms
Join (Group Items)
Join acts as a container for grouping items like buttons and inputs, applying border radius to the first and last items for horizontal or vertical lists.
Basic example
Default
Basic join elements example.
Icons
Basic join elements example using icons.
Illustrations
Vertical
Group items vertically.
Responsive
it's vertical on small screen and horizontal on large screen.
Multiple elements
Basic join example illustrating the integration of multiple elements.
Pill shape
The default shape of the join can be altered by using TailwindCSS <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">Border Radius</a> utility classes.
Dropdown with input
You can also join `input` and `dropdown`.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
join | component | Container for grouping multiple items |
join-item | part | Item inside join. Can be a button, input, etc. |
join-vertical | direction | Show items vertically |
join-horizontal | direction | Show items vertically |