Join
Groups adjacent children into a seamless joined element by removing interior borders and radii
Category: layout · WCAG 2.2-AA · group, join, segmented, layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content rendered inside the component. |
orientation | 'horizontal' | 'vertical' | horizontal | Axis the joined children flow along: `horizontal` for a row, `vertical` for a column. Inner corners are squared off either way. |
className | string | — | Additional CSS class names merged onto the root element. |
When to use
- Input + button search groups where the two controls should appear as one unit
- Segmented button rows where buttons share borders
When not to use
- Independent adjacent buttons that should remain visually separate
- SegmentedControl — it has its own built-in grouping and selection semantics
How to build an accessible Join in React →
Examples
Search group
Input and button joined into a single search control
<Join><Input placeholder="Search…" /><Button>Go</Button></Join>Segmented buttons
Segmented button row with no gaps between items
<Join><Button variant="secondary">Day</Button><Button variant="secondary">Week</Button><Button variant="secondary">Month</Button></Join>Vertical stack
Vertically joined button group
<Join orientation="vertical"><Button>Top</Button><Button>Middle</Button><Button>Bottom</Button></Join>Related components
- SegmentedControl — SegmentedControl has built-in selection state; Join is purely a layout wrapper
- InputGroup — InputGroup handles input + addon joining; Join is the general-purpose grouping primitive