feat(radio, checkbox, switch): add composable Legend sub-component for group components by mattrothenberg · Pull Request #423 · cloudflare/kumo

mattrothenberg · 2026-04-16T13:45:09Z

Summary

Adds Radio.Legend, Checkbox.Legend, and Switch.Legend sub-components that accept className for full styling control
Makes the legend string prop optional when using the sub-component instead
Solves the problem of redundant visible legends when a group is already labeled by a parent Field or heading (e.g. className="sr-only" to visually hide)

Before

When a RadioGroup (or CheckboxGroup/SwitchGroup) was nested inside a Field, the legend created an unavoidable visual duplicate of the label with no way to hide it without targeting internal implementation details.

After

// Simple case still works exactly as before
<Radio.Group legend="Paths" defaultValue="all">
  <Radio.Item label="Allow all paths" value="all" />
</Radio.Group>

// New: composable legend with full className control
<Radio.Group defaultValue="all">
  <Radio.Legend className="sr-only">Paths</Radio.Legend>
  <Radio.Item label="Allow all paths" value="all" />
</Radio.Group>

Changes

File	Change
`radio.tsx`, `checkbox.tsx`, `switch.tsx`	Added `Legend` sub-component, made `legend` prop optional
`*/index.ts`, `src/index.ts`	Exported new components and types
`RadioDemo.tsx`	Added `RadioLegendSrOnlyDemo`, `RadioLegendCustomDemo`
`CheckboxDemo.tsx`	Added `CheckboxLegendSrOnlyDemo`, `CheckboxLegendCustomDemo`
`SwitchDemo.tsx`	Added `SwitchGroupDemo`, `SwitchLegendSrOnlyDemo`, `SwitchLegendCustomDemo`
`radio.mdx`, `checkbox.mdx`, `switch.mdx`	Added docs sections + API reference for Legend sub-components

Reviews
bonk has reviewed the change
automated review not possible because: new API surface needs human design review
Tests
Additional testing not necessary because: existing 730 tests pass, legend is backwards-compatible, and new sub-components are thin wrappers around Base UI's Fieldset.Legend

…r group components Add Radio.Legend, Checkbox.Legend, and Switch.Legend sub-components that accept className for full styling control (e.g. sr-only to visually hide). Make legend string prop optional when using the sub-component instead. This solves the problem of redundant visible legends when a group is already labeled by a parent Field or heading. Includes docs demos and API reference entries for all three components.

Switch.Group now matches Radio.Group and Checkbox.Group styling: no border, no padding, no rounded corners. Also normalizes legend from text-lg to text-base.

pkg-pr-new · 2026-04-16T13:47:42Z

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

commit: cebcabc

github-actions · 2026-04-16T13:48:32Z

Docs Preview

View docs preview

Commit: 3a58aee

mattrothenberg · 2026-04-16T13:52:17Z

/bonk

github-actions · 2026-04-16T13:55:22Z

Visual Regression Report — 17 changed, 20 unchanged

17 screenshot(s) with visual changes:

Button / Icon Only

32 px (0.03%) changed

Before	After	Diff

Button / Loading State

3 px (0%) changed

Before	After	Diff

Button / Title

422 px (0.42%) changed

Before	After	Diff

Dialog / Dialog With Actions

191 px (0.19%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

244 px (0.24%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

299 px (0.29%) changed

Before	After	Diff

Select / Select Sizes

170 px (0.09%) changed

Before	After	Diff

Select / Select Without Label

183 px (0.18%) changed

Before	After	Diff

Select / Select Placeholder

706 px (0.7%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

556 px (0.55%) changed

Before	After	Diff

Select / Select Complex

1,093 px (0.92%) changed

Before	After	Diff

Select / Select Disabled Items

318 px (0.31%) changed

Before	After	Diff

Select / Select Grouped With Disabled

450 px (0.44%) changed

Before	After	Diff

Select (Open)

1,370 px (0.01%) changed

Before	After	Diff

20 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 / Disabled State
Dialog / Dialog Basic
Dialog / Dialog Alert
Dialog / Dialog With Combobox
Dialog / Dialog With Dropdown
Select / Select With Field
Select / Select With Tooltip
Select / Select Custom Rendering
Select / Select Disabled Options
Select / Select Grouped
Select / Select Long List

Generated by Kumo Visual Regression

ask-bonk · 2026-04-16T13:58:57Z

Based on my thorough review of PR #423, here's my analysis:

Review Summary

This PR adds composable Legend sub-components (Radio.Legend, Checkbox.Legend, Switch.Legend) that provide full styling control via className. This solves a real accessibility issue where redundant visible legends appear when a group is already labeled by a parent Field or heading.

✅ What's Well Done

Clean Implementation: Each Legend component is a thin, focused wrapper around Base UI's Fieldset.Legend with proper styling using semantic tokens (text-kumo-default, etc.)
Consistent API: All three components follow the same pattern:
- Made legend prop optional in the Group component
- Added composable Legend sub-component with children and className props
- Properly exported via compound component pattern and direct exports
Follows Conventions:
- ✅ Uses cn() for className composition
- ✅ No raw Tailwind colors (semantic tokens only)
- ✅ No dark: variants
- ✅ All components have displayName set
- ✅ Proper TypeScript types exported
Comprehensive Documentation:
- Demos added showing both sr-only and custom styling use cases
- MDX docs updated with examples and API reference
- Changeset properly created
Backwards Compatible: The legend string prop still works exactly as before

🔍 Minor Observations

Switch.Legend styling: Uses text-lg while Radio/Checkbox use text-base. This matches the existing Switch.Group legend styling, so it's consistent within Switch, but creates inconsistency between components. This appears intentional based on existing Switch.Group styling.
Missing Switch.Group value props: Unlike Radio.Group and Checkbox.Group, Switch.Group doesn't have value/onValueChange props. This is pre-existing (not introduced by this PR), but worth noting.

🧪 Test Results

Radio tests pass ✅
No existing Checkbox or Switch tests (not a regression)
Lint/type failures are due to missing auto-generated files (ai/component-registry.json, ai/schemas.ts) - not related to PR changes

💡 Optional Enhancement

Consider adding a development warning if neither legend prop nor Legend sub-component is provided to ensure groups remain accessible.

Overall: This is a well-designed, well-implemented feature that follows all project conventions. The API is intuitive and solves a real problem. I recommend approving this PR.

github run

…component RadioLegend, CheckboxLegend, SwitchLegend are only accessible as Radio.Legend, Checkbox.Legend, Switch.Legend — no standalone named exports. Type exports (RadioLegendProps, etc.) are still available.

mattrothenberg · 2026-04-16T16:58:22Z

/bonk can you please approve?

ask-bonk · 2026-04-16T17:00:52Z

Based on my thorough review of PR #423, here's my analysis:

Review Summary

This PR adds composable Legend sub-components (Radio.Legend, Checkbox.Legend, Switch.Legend) that provide full styling control via className. This solves a real accessibility issue where redundant visible legends appear when a group is already labeled by a parent Field or heading.

✅ What's Well Done

Clean Implementation: Each Legend component is a thin, focused wrapper around Base UI's Fieldset.Legend with proper styling using semantic tokens (text-kumo-default, etc.)
Consistent API: All three components follow the same pattern:
- Made legend prop optional in the Group component
- Added composable Legend sub-component with children and className props
- Properly exported via compound component pattern and direct exports
Follows Conventions:
- ✅ Uses cn() for className composition
- ✅ No raw Tailwind colors (semantic tokens only)
- ✅ No dark: variants
- ✅ All components have displayName set
- ✅ Proper TypeScript types exported
Comprehensive Documentation:
- Demos added showing both sr-only and custom styling use cases
- MDX docs updated with examples and API reference
- Changeset properly created
Backwards Compatible: The legend string prop still works exactly as before

🔍 Minor Observations

Switch.Legend styling: Uses text-base while Radio/Checkbox use text-base. This matches the existing Switch.Group legend styling, so it's consistent within Switch, but creates inconsistency between components. This appears intentional based on existing Switch.Group styling.
Missing Switch.Group value props: Unlike Radio.Group and Checkbox.Group, Switch.Group doesn't have value/onValueChange props. This is pre-existing (not introduced by this PR), but worth noting.

🧪 Test Results

Radio tests pass ✅
No existing Checkbox or Switch tests (not a regression)
Lint/type failures are due to missing auto-generated files (ai/component-registry.json, ai/schemas.ts) - not related to PR changes

💡 Optional Enhancement

Consider adding a development warning if neither legend prop nor Legend sub-component is provided to ensure groups remain accessible.

Overall: This is a well-designed, well-implemented feature that follows all project conventions. The API is intuitive and solves a real problem. I recommend approving this PR.

github run

mattrothenberg added 2 commits April 16, 2026 09:44

fix(switch): remove border/padding from Switch.Group for consistency

241a6e9

Switch.Group now matches Radio.Group and Checkbox.Group styling: no border, no padding, no rounded corners. Also normalizes legend from text-lg to text-base.

mattrothenberg and others added 2 commits April 16, 2026 13:09

merge: resolve conflicts with main (adopt markdown heading format)

bc40b5a

Merge branch 'main' into feat/composable-group-legend

cebcabc

Brayden approved these changes Apr 20, 2026

View reviewed changes

mattrothenberg merged commit 1954aa8 into main Apr 20, 2026
17 checks passed

mattrothenberg deleted the feat/composable-group-legend branch April 20, 2026 13:45

Conversation

mattrothenberg commented Apr 16, 2026

Summary

Before

After

Changes

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Docs Preview

Uh oh!

mattrothenberg commented Apr 16, 2026

Uh oh!

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

Uh oh!

Button / Icon Only

Button / Loading State

Button / Title

Dialog / Dialog With Actions

Dialog / Dialog Confirmation

Dialog / Dialog With Select

Dialog (Open)

Select / Select Basic

Select / Select Sizes

Select / Select Without Label

Select / Select Placeholder

Select / Select Loading

Select / Select Multiple

Select / Select Complex

Select / Select Disabled Items

Select / Select Grouped With Disabled

Select (Open)

Uh oh!

ask-bonk bot commented Apr 16, 2026

Review Summary

✅ What's Well Done

🔍 Minor Observations

🧪 Test Results

💡 Optional Enhancement

Uh oh!

mattrothenberg commented Apr 16, 2026

Uh oh!

ask-bonk bot commented Apr 16, 2026

Review Summary

✅ What's Well Done

🔍 Minor Observations

🧪 Test Results

💡 Optional Enhancement

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pkg-pr-new bot commented Apr 16, 2026 •

edited

Loading

github-actions bot commented Apr 16, 2026 •

edited

Loading

github-actions bot commented Apr 16, 2026 •

edited

Loading