Add new InputGroup compound component with Addon, Suffix, and Button support by pedromenezes1 · Pull Request #249 · cloudflare/kumo

pedromenezes1 · 2026-03-18T01:32:18Z

New InputGroup compound component for building inputs with icons, addons, inline suffixes, and action buttons.

Includes comprehensive documentation page with demos and unit tests.

Features

Field Integration — InputGroup accepts label, description, error, required, and labelTooltip props directly; automatically wraps in Field when label is provided
Addons — Place icons or text before/after the input using align="start" or align="end"
Compact Button — Small button inside an Addon for secondary actions (copy, clear, toggle visibility)
Action Button — Full-height flush button as a direct child for primary actions (submit, search)
Inline Suffix — Text that flows seamlessly next to the typed value (e.g., .workers.dev); input width adjusts automatically as user types
Size Variants — xs, sm, base, lg sizes cascade to all children via context
Error State — Error flows through context; InputGroup.Input auto-sets aria-invalid="true" when error is present
Disabled State — disabled prop disables all interactive children

Sub-components

Component	Description
`InputGroup`	Root container; provides context and accepts Field props
`InputGroup.Input`	Styled input; inherits `size`, `disabled`, `error` from context
`InputGroup.Addon`	Container for icons, text, or compact buttons; `align="start"` (default) or `align="end"`
`InputGroup.Button`	Full-height button (direct child) or compact button (inside Addon)
`InputGroup.Suffix`	Inline text suffix with automatic width measurement

Usage Examples

// With Field props (label, description, error, tooltip)
<InputGroup
  label="Email"
  description="We'll never share your email"
  error={{ message: "Invalid email", match: "typeMismatch" }}
  labelTooltip="Used for account recovery"
>
  <InputGroup.Input type="email" />
  <InputGroup.Addon align="end">@example.com</InputGroup.Addon>
</InputGroup>

// Inline suffix with auto-measuring width
<InputGroup>
  <InputGroup.Input placeholder="my-worker" />
  <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>
</InputGroup>

// Search with icon addon and action button
<InputGroup>
  <InputGroup.Addon><MagnifyingGlassIcon /></InputGroup.Addon>
  <InputGroup.Input placeholder="Search..." />
  <InputGroup.Button variant="primary">Search</InputGroup.Button>
</InputGroup>

// Password with compact toggle button inside addon
<InputGroup label="Password">
  <InputGroup.Input type={show ? "text" : "password"} />
  <InputGroup.Addon align="end">
    <InputGroup.Button variant="ghost" size="sm" onClick={toggle}>
      {show ? <EyeSlashIcon /> : <EyeIcon />}
    </InputGroup.Button>
  </InputGroup.Addon>
</InputGroup>

Caveats

InputGroup.Input omits label, description, error, size, and labelTooltip props — these are handled by the parent InputGroup
When using InputGroup.Suffix, the input width is measured dynamically via a hidden ghost element
InputGroup.Button renders differently based on placement: full-height flush when direct child, compact when inside Addon

Screenshots

Checklist

bonk has reviewed the change
Tests included/updated

pkg-pr-new · 2026-03-18T14:10:45Z

npm i https://pkg.pr.new/@cloudflare/kumo@249

commit: bb67d2d

github-actions · 2026-03-18T14:18:38Z

Docs Preview

View docs preview

Commit: bb67d2d

github-actions · 2026-03-18T14:23:43Z

Visual Regression Report — 7 changed, 26 unchanged

7 screenshot(s) with visual changes:

Button / Loading State

8 px (0.01%) changed

Before	After	Diff

Select / Select Sizes

901 px (0.48%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select With Tooltip

294 px (0.29%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

26 screenshot(s) unchanged

Button / Basic
Button / Variant: Primary
Button / Variant: Secondary
Button / Variant: Ghost
Button / Variant: Destructive
Button / Variant: Outline
Button / Variant: Secondary Destructive
Button / Sizes
Button / With Icon
Button / Icon Only
Button / Disabled State
Button / Title
Dialog / Dialog Basic
Dialog / Dialog Confirmation
Dialog / Dialog With Dropdown
Dialog (Open)
Select / Select Basic
Select / Select Without Label
Select / Select Placeholder
Select / Select Custom Rendering
Select / Select Multiple
Select / Select Complex
Select / Select Disabled Options
Select / Select Disabled Items
Select / Select Grouped
Select / Select Grouped With Disabled

Generated by Kumo Visual Regression

- Fix nested <label> bug: conditional <div>/<label> container based on label prop - Resolve focusMode API inconsistency: mark @internal consistently - Remove dead child.type === 'button' string check in addon - Remove misleading variant/shape props from InputGroupButtonProps - Add dev-mode console.warn when sub-components used outside InputGroup - Remove dead CSS outline: auto override in kumo-binding.css - Remove data-focus-scope scaffolding from demo - Delete accidentally committed empty dist.md - Update changeset to reflect final shipped API

- Use Omit<InputGroupRootPropsInternal, 'focusMode'> for public type - Remove focusMode from KUMO_INPUT_GROUP_VARIANTS export - Move focusMode variant data to internal-only constant - Add dist.md to kumo-docs-astro .gitignore

Removes lint error for unused variable. The focusMode variant data was kept as documentation but nothing referenced it.

backward compat (stratus: 86 files): - removed old input/input-group.tsx, re-exported from old path - added InputGroup.Label/Description as deprecated aliases for Addon/Suffix - restored variant and shape on InputGroup.Button - migrated pagination to new inputgroup import button behavior: - reads focusMode from context: container=compact ghost, individual=standalone - one-size-down rule in container mode (lg→base, base→sm, sm→xs) - icon sizing fixed for forwardRef components (phosphor icons) - addon auto-reduces padding when containing a button focus & interaction: - invisible label overlay on div container for click-to-focus on suffix - z-index layering keeps input/addon above overlay - suffix pointer-events-none for click passthrough api cleanup: - disabled omitted from InputGroup.Input type (root only) - variant description updated on InputGroup.Button - dev-mode warnings for misplaced props on sub-components docs & demos: - demos refactored to self-contained functions for code extraction - width constraints via className or wrapper div - ghost button icons use text-kumo-subtle - all button demos use icon prop, sizes demo uses shape=square

pedromenezes1 · 2026-04-09T18:20:22Z

/bonk

ask-bonk · 2026-04-09T19:05:45Z

@pedromenezes1 Bonk workflow was cancelled.

View workflow run · To retry, trigger Bonk again.

pedromenezes1 · 2026-04-09T21:19:11Z

/bonk

pedromenezes1 · 2026-04-10T09:45:47Z

/bonk

…styling - Remove focusMode as a public prop; auto-detect from children analysis - "individual" mode when InputGroup.Button (non-ghost) is a direct child - "hybrid" mode when both Addon and non-ghost Button coexist - Fix double borders with border-l-0 on non-first children - Fix focus ring stacking with outline-offset: -1px - Fix stale ring-kumo-ring token → ring-kumo-hairline - Add Usage section to InputGroup docs - Diversify States demo examples

pedromenezes1 · 2026-04-10T14:24:04Z

/bonk please don't fail a 4th time 🤝

ask-bonk

Review Summary

This is a well-designed InputGroup compound component with excellent architecture and comprehensive test coverage. However, there are a few issues that need to be addressed before merging:

Issues to Fix

Changeset accuracy - Per @pedromenezes1's earlier review, the changeset mentions deprecated InputGroup.Label and InputGroup.Description aliases. These are implemented in the code (lines 323-335 of input-group.tsx) but please confirm the changeset accurately reflects the final shipped API.
Nested <label> elements - As @stritt noted, when the label prop is passed, Field renders a <label> with htmlFor, and the code also renders an invisible <label> overlay (line 281-287). This creates nested labels which is invalid HTML. The invisible label should be changed to a <span> with role="button" or the click-to-focus behavior should be handled differently.
CSS dead code - @stritt noted there's outline: auto before outline: solid 2px -webkit-focus-ring-color in kumo-binding.css. Looking at the current code, I don't see this issue, so it may have been fixed already - please confirm.

Minor Suggestions (non-blocking)

The focusMode prop is documented in KUMO_INPUT_GROUP_VARIANTS but is auto-detected, not user-configurable. Consider if this should be marked as internal in documentation.

Strengths

Clean compound component architecture with proper context handling
Comprehensive test coverage (1300+ lines)
Smart hybrid focus mode for mixed addon+button layouts
Good accessibility handling with aria-invalid from context
Well-documented with extensive demos

Overall excellent work - just need to address the nested label issue.

ask-bonk · 2026-04-10T14:25:37Z

Review Complete

I've submitted a comprehensive review for PR #249. Here's a summary:

Issues Identified:

Nested <label> Elements - When the label prop is passed to InputGroup, the Field component already renders a <label> with htmlFor. However, the code also renders an invisible <label> overlay for click-to-focus behavior (lines 281-287 in input-group.tsx). This creates nested <label> elements, which is invalid HTML with undefined assistive technology behavior. The invisible element should be changed to a <span> with click handling instead.
Changeset Accuracy - The changeset mentions deprecated InputGroup.Label and InputGroup.Description aliases. While these are implemented in the code, @pedromenezes1 noted in an earlier review that the changeset should reflect the final API state.

Strengths Highlighted:

Clean compound component architecture with proper context handling
Comprehensive test coverage (1300+ lines of tests)
Smart hybrid focus mode for mixed addon+button layouts
Good accessibility handling with aria-invalid flowing through context
Well-documented with extensive demos

The PR is in excellent shape overall - the main blocker is fixing the nested label issue.

github run

pedromenezes1 · 2026-04-10T14:52:08Z

/bonk these issues you have identified in the last review were all fixed already. can you check it all again?

ask-bonk

This is a well-designed InputGroup compound component with excellent architecture and comprehensive test coverage. The implementation shows thoughtful attention to accessibility, styling consistency, and developer experience.

Summary of Findings

✅ Already Resolved

The previous review identified several issues, and most have been addressed:

Empty dist.md file — Confirmed removed (no longer exists in the working tree)
data-focus-scope scaffolding — Confirmed removed (no occurrences in the codebase)
CSS dead code — The outline: auto issue noted by @stritt has been resolved (lines 233-246 of kumo-binding.css are clean)

🔧 Minor Suggestions

Changeset accuracy — The changeset mentions deprecated InputGroup.Label and InputGroup.Description aliases. While these are implemented in the code (lines 323-335 of input-group.tsx), please confirm this matches the intended final API as noted in previous reviews.
Nested <label> handling — The code has been updated to handle this correctly:
- When label prop is provided: uses <div> container + invisible <label> overlay with aria-hidden="true"
- When no label: uses native <label> for click-to-focus
- The JSDoc (lines 59-68) clearly documents this pattern and warns against nested labels

🎉 Strengths

Clean compound component architecture with proper context handling via InputGroupContext
Comprehensive test coverage (1316 lines of tests covering rendering, positioning, sizing, states, and edge cases)
Smart hybrid focus mode for mixed addon+button layouts — the detectFocusMode() logic elegantly handles container/individual/hybrid modes
Excellent accessibility: aria-invalid flows through context, tooltip→aria-label derivation, dev warnings for misuse
Well-documented with extensive demos and thorough MDX documentation
CSS-first sizing system using static Tailwind classes to avoid JIT detection issues (well-commented in context.ts)
Proper dev warnings for ghost buttons outside addons and size prop misuse

The implementation is production-ready. The deprecation aliases are a nice touch for migration ergonomics.

ask-bonk · 2026-04-10T14:53:51Z

I reviewed PR #249 by examining the diff and key files (input-group.tsx, context.ts, changeset, and tests), verified that all previously identified issues were resolved (empty dist.md removed, CSS dead code fixed, nested label handling corrected), and submitted a comprehensive GitHub review highlighting the component's excellent architecture, accessibility, and test coverage.

github run

# Conflicts: # packages/kumo/src/components/input/input-group.tsx

# Conflicts: # .opencode/package-lock.json # packages/kumo/src/components/pagination/pagination.tsx

… styling

…flict preserving main's fix

pedromenezes1 force-pushed the feat/input-group-addon branch from b348d28 to 86e9d5d Compare March 18, 2026 01:38

pedromenezes1 changed the title ~~fix(InputGroup): flush button properly covers container ring border~~ feat(InputGroup): revamp component with new compound API Mar 18, 2026

pedromenezes1 changed the title ~~feat(InputGroup): revamp component with new compound API~~ feat: new InputGroup compound component with Addon, Suffix, and Button support Mar 18, 2026

pedromenezes1 changed the title ~~feat: new InputGroup compound component with Addon, Suffix, and Button support~~ Add new InputGroup compound component with Addon, Suffix, and Button support Mar 18, 2026

pedromenezes1 force-pushed the feat/input-group-addon branch 17 times, most recently from 1f88e51 to ca11f35 Compare March 18, 2026 14:10

pedromenezes1 force-pushed the feat/input-group-addon branch from ca11f35 to 5c4d6f2 Compare March 18, 2026 14:12

mattrothenberg force-pushed the feat/input-group-addon branch from 0caf233 to 5bbecc8 Compare March 18, 2026 14:40

pedromenezes1 force-pushed the feat/input-group-addon branch 4 times, most recently from 09d553b to 5917fe8 Compare March 23, 2026 22:15

pedromenezes1 and others added 9 commits April 4, 2026 21:44

Merge branch 'main' into feat/input-group-addon

ddd73ec

revert: undo .gitignore change for kumo-docs-astro

191b3d9

fix: remove unused INTERNAL_FOCUS_MODE_VARIANTS constant

03de7c0

Removes lint error for unused variable. The focusMode variant data was kept as documentation but nothing referenced it.

docs: simplify changeset description for InputGroup

96f6920

Merge branch 'main' into feat/input-group-addon

aa9c3e5

Merge remote-tracking branch 'origin/main' into feat/input-group-addon

c9e2bc3

Merge branch 'main' into feat/input-group-addon

01fb01c

ask-bonk bot reviewed Apr 10, 2026

View reviewed changes

pedromenezes1 and others added 4 commits April 13, 2026 15:20

Merge remote-tracking branch 'origin/main' into feat/input-group-addon

9ac0985

# Conflicts: # packages/kumo/src/components/input/input-group.tsx

Merge remote-tracking branch 'origin/main' into feat/input-group-addon

94be3e7

# Conflicts: # .opencode/package-lock.json # packages/kumo/src/components/pagination/pagination.tsx

Merge branch 'main' into feat/input-group-addon

e53aa30

docs(input-group): convert JSX headings to markdown and improve table…

6b10880

… styling

pedromenezes1 self-assigned this Apr 17, 2026

pedromenezes1 added 2 commits April 17, 2026 15:30

Merge main into feat/input-group-addon: resolve sub-components.ts con…

667aa35

…flict preserving main's fix

chore: drop unused sub-components.ts changes (fix already on main)

bb67d2d

pedromenezes1 requested review from Brayden and stritt April 17, 2026 18:06

Conversation

pedromenezes1 commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Features

Sub-components

Usage Examples

Caveats

Screenshots

Checklist

Uh oh!

pkg-pr-new bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docs Preview

Uh oh!

github-actions bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Button / Loading State

Select / Select Sizes

Select / Select With Field

Select / Select With Tooltip

Select / Select Loading

Select / Select Long List

Select (Open)

Uh oh!

pedromenezes1 commented Apr 9, 2026

Uh oh!

ask-bonk bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pedromenezes1 commented Apr 9, 2026

Uh oh!

pedromenezes1 commented Apr 10, 2026

Uh oh!

pedromenezes1 commented Apr 10, 2026

Uh oh!

ask-bonk bot left a comment

Choose a reason for hiding this comment

Review Summary

Issues to Fix

Minor Suggestions (non-blocking)

Strengths

Uh oh!

ask-bonk bot commented Apr 10, 2026

Review Complete

Issues Identified:

Strengths Highlighted:

Uh oh!

pedromenezes1 commented Apr 10, 2026

Uh oh!

ask-bonk bot left a comment

Choose a reason for hiding this comment

Summary of Findings

✅ Already Resolved

🔧 Minor Suggestions

🎉 Strengths

Uh oh!

ask-bonk bot commented Apr 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

pedromenezes1 commented Mar 18, 2026 •

edited

Loading

pkg-pr-new bot commented Mar 18, 2026 •

edited

Loading

github-actions bot commented Mar 18, 2026 •

edited

Loading

github-actions bot commented Mar 18, 2026 •

edited

Loading

ask-bonk bot commented Apr 9, 2026 •

edited

Loading