Centrim Design System — a token-first, accessible React component system.
V2 audit — Input groups
Composed fields: one border, one height, one focus ring. Prefixes, suffixes, addons and steppers attach to the control instead of floating beside it.
InputGroup
Attaches prefixes, suffixes, icons, checkboxes, radios, buttons, dropdowns and steppers to a single field.
InputGroupInputGroupTextInputGroupIconInputGroupFieldInputGroupAddonInputGroupButtonInputGroupSelectInputGroupStepperLive component
https://.centrim.app
£
/ 60 beds
Occupancy cannot exceed capacity.
Legacy mapping
Legacy screens built URL, currency, unit and search-with-scope fields by placing separate controls next to each other, producing mismatched heights and double borders. V2 makes the composed field one control.
| Attribute | Specification |
|---|---|
| Default | tone="neutral", size="medium" |
| Variants | prefix text · suffix text · leading icon · trailing icon · checkbox addon · radio addon · button addon · dropdown addon · number spinner |
| Sizes | small (32px) · medium (40px) · large (48px) |
| States | default · hover · focus-within · disabled · readonly · error |
| Icon behaviour | Icons at `--size-icon-sm` inside the padding; addon buttons follow the group size. |
| Spacing | Segment padding 12px; separators are 1px `border-border-default`. |
| Typography | Body size follows the group size; addon text `text-text-secondary`. |
| Border radius | `rounded-md` on the group only — segments are square and clipped. |
| Colour usage | Tones map to semantic borders (`primary`, `success`, `warning`, `error`, `info`); addon fills use `bg-background-subtle`. An `errorText` forces the error tone. |
| Responsive | Text prefixes may be dropped below `sm` in favour of helper text; never truncate an addon label. |
When to use
- Units, currencies, protocols, scoped search, quantity steppers
When not to use
- Unrelated controls that merely sit next to each other
Accessibility
- Focus ring is on the group so the whole field reads as one control.
- Every addon control keeps its own label; addons are never the field's only label.
V2 token candidates
- `--color-field-addon` — addon fills currently reuse `background-subtle`; a dedicated role would let addons darken independently in dark mode.