Group
Directive that groups adjacent Kikita UI controls and can collapse their shared borders.
Import the public directive from the published package entrypoint.
import { KuiGroupDirective } from '@kikita-labs/ui';Apply kuiGroup to a container element around adjacent buttons, icon buttons, or fields. Use collapsed to merge their shared borders into one visual control.
<div class="basic-group-example">
<div kuiGroup collapsed>
<button kuiButton type="button" shape="outline">One</button>
<button kuiButton type="button" shape="outline">Two</button>
<button kuiIconButton type="button" shape="outline" aria-label="More options">
<kui-icon [source]="moreIcon" />
</button>
</div>
</div>orientation switches the group between a horizontal row and a vertical stack. Border collapsing follows the same axis.
<div class="group-orientation-example">
<div kuiGroup collapsed orientation="horizontal">
<button kuiButton type="button" shape="outline">Left</button>
<button kuiButton type="button" shape="outline">Center</button>
<button kuiButton type="button" shape="outline">Right</button>
</div>
<div kuiGroup collapsed orientation="vertical" class="group-orientation-example__vertical">
<button kuiButton type="button" shape="outline">Top</button>
<button kuiButton type="button" shape="outline">Middle</button>
<button kuiButton type="button" shape="outline">Bottom</button>
</div>
</div>size is set once on the group and inherited by grouped controls through CSS variables, instead of repeating size on every child.
<div class="group-size-example">
<div kuiGroup collapsed size="xs">
<button kuiButton type="button" shape="outline">One</button>
<button kuiButton type="button" shape="outline">Two</button>
</div>
<div kuiGroup collapsed size="sm">
<button kuiButton type="button" shape="outline">One</button>
<button kuiButton type="button" shape="outline">Two</button>
</div>
<div kuiGroup collapsed size="md">
<button kuiButton type="button" shape="outline">One</button>
<button kuiButton type="button" shape="outline">Two</button>
</div>
<div kuiGroup collapsed size="lg">
<button kuiButton type="button" shape="outline">One</button>
<button kuiButton type="button" shape="outline">Two</button>
</div>
</div>Group a text input with an adjacent button or icon button to build search and inline-action patterns. In a horizontal group, the field's column fills the group's available width by default; button and icon-button columns stay content-sized.
<div class="group-field-example">
<div kuiGroup collapsed>
<input kuiInput placeholder="Search projects" />
<button kuiIconButton type="button" shape="outline" aria-label="Search">
<kui-icon [source]="searchIcon" />
</button>
</div>
<div kuiGroup collapsed size="sm">
<input kuiInput placeholder="Search" />
<button kuiButton type="button" shape="outline">Go</button>
</div>
</div>Inputs verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction for the grouped controls. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Size inherited by grouped controls through CSS variables. Set on the group instead of each child. |
| collapsed | boolean | false | Collapses adjacent control borders into a single visual group, removing the double border between children. |
| rounded | boolean | true | Keeps the outer group corners rounded when collapsed. Set to false for square outer corners. |
Group only changes visual chrome. It does not change roles, focus order, or keyboard behavior of the controls it wraps.
- Group applies to a plain container element; it does not add a role like toolbar or group by itself.
- Keep native semantics on grouped children: real
<button>elements, a labeled<input>, and anaria-labelon icon-only buttons. - Tab order follows the DOM order of the grouped children, not the visual orientation.
- collapsed and rounded are purely visual and never affect focus or hit targets.