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