Skip to content
EspañolEnglish
All components (204)

Joined controls

Actions · CompactGroup

What it is and when to use it

A field with its button, or several fields, joined with no gaps and with square corners where they meet: the search box with "Search", the coupon with "Apply", a prefix with its number. The fields take up what is left and the buttons take their own size.

When to use it

  • An action that goes with ONE field and is understood together with it: search, apply a coupon, add.

When not to

  • Only buttons: that is ButtonGroup, which does the same.
  • A field with a prefix that is part of the value (a phone number): PhoneField already brings it.

The fields inside carry hiddenLabel. With the label in view, the box drops below the text and stops lining up with the button. The label is still announced and the group carries its own name. The help text and the error appear below without moving the others.

Keyboard: Tab goes through the controls, as if they were separate. Accessibility: role="group" and a required label.

Fine-tuning: it inherits that of each field and button. The joining is done by removing the inner radius and overlapping one border, not with gap: 0, which would leave the middle line twice as thick.

What it looks like

That coupon has expired

<CompactGroup label="Search customers">
  <TextField label="Search" hiddenLabel placeholder="Name or email" />
  <Button variant="solid">Search</Button>
</CompactGroup>

Props

Import it with import { CompactGroup } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNodeThe joined controls: fields and buttons, in the order in which they are seen.
labelrequiredstringWhat the group is called: "Search customers". Without it, the screen reader names the loose controls and loses the fact that they go together.
classNamestringMerged with the library classes; it does not replace them.
orientation"horizontal" | "vertical"—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: