cloudflare/kumo @cloudflare/kumo@2.0.0

@cloudflare/kumo@2.0.0

Repository: cloudflare/kumo

Tag: @cloudflare/kumo@2.0.0

Published: 2026-04-30T15:46:41Z

Prerelease: no

Release notes:

Major Changes

• bf68ac0: BREAKING: Checkbox onCheckedChange now receives event details as second argument

The onCheckedChange callback signature now matches Base UI, providing access to the underlying event:

// Before
onCheckedChange={(checked) => console.log(checked)}

// After (event details available as optional second arg)
onCheckedChange={(checked, eventDetails) => {
console.log(checked);
console.log(eventDetails.event); // native event
}}

Removed deprecated props:

• onChange - use onCheckedChange instead
• onValueChange on individual checkboxes - use onCheckedChange instead
• onClick - was redundant, use standard React event handling via spread props

Migration:

// Before (deprecated)
console.log(e.target.checked)} />
setChecked(checked)} />

// After
setChecked(checked)} />

Note: Checkbox.Group's onValueChange prop is unchanged - it still accepts (values: string[]) => void.

• f9ba3f9: feat(Collapsible)!: refactor to compound component API

Breaking change: Collapsible now uses a compound component pattern matching other Kumo components like Popover and Dialog.

Before

Content here

After

Show details
Content here

Migration

For the quickest migration, use the new DefaultTrigger and DefaultPanel components which preserve the previous styling:

Show details
Content here

New Sub-components

| Component | Description | | ---------------------------- | ----------------------------------------------------------- | | Collapsible.Root | Manages open state | | Collapsible.Trigger | Composable trigger with render prop support | | Collapsible.Panel | Content container | | Collapsible.DefaultTrigger | Pre-styled trigger with caret icon (migration helper) | | Collapsible.DefaultPanel | Pre-styled panel with border-left accent (migration helper) |

• 3256a7b: feat(Text): decouple visual heading variants from semantic HTML elements

Breaking change: heading1, heading2, heading3 variants no longer auto-render `, , tags. They now render as by default. Use the as` prop to set the appropriate semantic heading level for your document outline.

Before:

Title // rendered

After:

Title
// explicit semantic element

The as prop is now restricted to valid text elements: "h1" through "h6", "p", and "span".

• 267ba7a: BREAKING (v2): Text requires an explicit as prop when variant is a heading ("heading1", "heading2", "heading3").

The previous major bump (#393) decoupled heading variants from semantic HTML — heading variants render as ` unless an as prop is provided. That made the library more flexible but introduced a silent accessibility footgun: forgetting as on a real section heading produced a `, excluding it from the document outline without any type-level feedback.

This change makes as required for heading variants via a discriminated union. Body and monospace variants are unchanged (as remains optional; defaults to ` and ` respectively).

Migration

Every `, , must now pass as`. TypeScript will flag each call site:

// Before (compiled, silently produced a )
Page Title

// After (required)
Page Title

// Still allowed — decorative heading-styled text that is NOT a section heading:
Big bold card label

For each heading call site, decide whether it's a real section heading (use as="h1"/"h2"/etc.) or decorative (use as="span"). Codemod cannot make this choice mechanically — it is a semantic judgment per usage.

Body and monospace variants: no changes required.

Minor Changes

• 1954aa8: feat(radio, checkbox, switch): add composable Legend sub-component for group components
• Add Radio.Legend, Checkbox.Legend, and Switch.Legend sub-components
• Accepts className for full styling control (e.g. className="sr-only" to visually hide)
• Make legend string prop optional when using the sub-component instead
• Useful when a parent Field already provides a visible label and the legend would be redundant
• Breaking: Switch.Group no longer renders a visible border/padding/rounded container — now consistent with Radio.Group and Checkbox.Group. Use className to add a border if needed.

• 1eee41a: Add InputGroup compound component for composing decorated inputs

Compound structure: InputGroup, InputGroup.Input, InputGroup.Addon, InputGroup.Suffix, InputGroup.Button.

• Field integration — pass label, description, error, required, and labelTooltip directly to InputGroup
• Size variants (xs, sm, base, lg) propagate to all sub-components via context, including icon sizing in addons
• InputGroup.Addon — positions icons, text, or buttons at align="start" (default) or align="end" of the input
• InputGroup.Suffix — inline text suffix (e.g. .workers.dev)
• InputGroup.Button — ghost button for secondary actions with tooltip support
• Deprecated InputGroup.Label — use InputGroup.Addon instead
• Deprecated InputGroup.Description — use InputGroup.Suffix instead

{
/* Reveal / hide password */
}


setShow(!show)}
>
{show ? : }


;

{
/* Search input */
}


;

• 353faea: Adds Autocomplete component. A free-form text input with an optional filtered suggestion list. Unlike Combobox, the value is not constrained to the items list.

• 431de04: feat(radio): accept ReactNode for Radio.Item label and honor controlPosition on card appearance
• Radio.Item's label prop now accepts ReactNode, allowing icons, badges, or other markup alongside text.
• Radio.Group's controlPosition prop now takes effect on appearance="card". Card appearance continues to default to "end" (radio on the right); pass controlPosition="start" to render the radio on the left of the label and description.

• f9d8b76: Polish TableOfContents indicator and semantic HTML
• Replace pill/background-tint hover with left-border indicator pattern
• Switch to semantic ul/li HTML structure
• Add href and active props to TableOfContents.Group for clickable labels

• 07426f6: feat(table): add onCheckedChange prop to Table.CheckCell and Table.CheckHead, aligning with the Checkbox...