Control group
@xui/control-groupGroups adjacent inputs and buttons into one seamless unit — the rounding and doubled borders between neighbours collapse, and the shared 1px border is overlapped so it never reads as double-width.
Install
pnpm add @xui/control-group Add the barrel to a standalone component's imports:
import { XuiControlGroupImports } from '@xui/control-group';
@Component({
imports: [XuiControlGroupImports],
// …
})Examples
Default
Loading preview…
<div xuiControlGroup>
<input xuiInput placeholder="Search…" class="w-64" />
<button xuiButton variant="outline">Search</button>
</div>Fill
Loading preview…
<div xuiControlGroup fill class="w-96">
<button xuiButton variant="outline">Day</button>
<button xuiButton variant="outline">Week</button>
<button xuiButton variant="outline">Month</button>
</div>Vertical
Loading preview…
<div xuiControlGroup orientation="vertical" class="w-48">
<button xuiButton variant="outline">Top</button>
<button xuiButton variant="outline">Middle</button>
<button xuiButton variant="outline">Bottom</button>
</div>API
Groups adjacent inputs and buttons into one seamless unit.
Variants
orientationhorizontalfillfalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''orientation'horizontal' | 'vertical'Stack the controls in a row or a column.this.config.orientationfillbooleanStretch the controls to share the group's width (or height) equally.this.config.fill