fix(radio): handle props styles in getBaseProps

[wingkwong]

Closes #5942

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

• Bug Fixes
  • Properly merge custom className values with base radio styles so user-supplied styles are preserved.
• Style
  • Updated interactive states to use opacity transitions for hover/active and unified selection styling using data-state selectors.
• Documentation
  • Updated component examples and stories to reflect the new class composition and styling approach.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

🦋 Changeset detected

Latest commit: d74d2fd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@heroui/radio	Patch
@heroui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Nov 25, 2025 5:20pm
heroui-sb	Ready	Preview	Comment	Nov 25, 2025 5:20pm

[coderabbitai]

Walkthrough

Updates radio component internals and examples so user-provided className is merged by getBaseProps. Documentation examples and storybook usages are updated to pass className into getBaseProps; a changeset for a patch release is added.

Changes

Cohort / File(s)	Change Summary
Changeset entry .changeset/two-clouds-refuse.md	Adds a changeset file indicating a patch bump for @heroui/radio with the summary "handle props styles in getBaseProps".
Hook implementation packages/components/radio/src/use-radio.ts	getBaseProps now merges user className into base slot via clsx(baseStyles, props?.className) so className is handled by the hook.
Documentation examples apps/docs/content/components/radio-group/custom-impl.raw.jsx, apps/docs/content/components/radio-group/custom-impl.raw.tsx	Examples changed to call getBaseProps({ className: ... }) instead of spreading getBaseProps() and passing className separately; Tailwind classes adjusted (hover/active/spacing).
Storybook packages/components/radio/stories/radio.stories.tsx	Story code updated to use cn utility and pass composed className into getBaseProps (removed reliance on group context/isSelected props; selection styling driven by data-[selected=true]).

Sequence Diagram(s)

sequenceDiagram
  participant C as CustomRadio(Component)
  participant U as useRadio (hook)
  participant H as getBaseProps

  C->>U: call useRadio(props)
  U->>H: prepare baseStyles
  C->>H: invoke getBaseProps({ className: userClass })
  H-->>C: return mergedProps (className: clsx(baseStyles, userClass), ...data-attrs)
  C->>C: render <Component {...mergedProps}><input {...getInputProps()} /></Component>

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review focus:
  • Ensure clsx handles undefined/null className safely.
  • Confirm no unintended className propagation to semantic elements (labels/inputs).
  • Verify stories and docs reflect the new call signature and styling behavior.
  • Check data-state/data-[selected] attributes remain correct and accessible.

Suggested reviewers

• jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete with all required sections left as placeholder templates without substantive content filled in.	Fill in the Description, Current behavior, New behavior, and Breaking change sections with actual details about the fix.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(radio): handle props styles in getBaseProps' clearly and specifically describes the main change: fixing how styles from props are handled in the getBaseProps function of the radio component.
Linked Issues check	✅ Passed	The PR successfully addresses issue #5942 by modifying getBaseProps to accept and merge className from props, eliminating the React prop validation warning from the custom Radio implementation.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the radio component's getBaseProps function to handle className props, with documentation updates demonstrating the corrected usage pattern.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/issue-5942

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 67c85b3 and d74d2fd.

📒 Files selected for processing (3)

• apps/docs/content/components/radio-group/custom-impl.raw.jsx (1 hunks)
• apps/docs/content/components/radio-group/custom-impl.raw.tsx (1 hunks)
• packages/components/radio/stories/radio.stories.tsx (3 hunks)

🔇 Additional comments (3)

apps/docs/content/components/radio-group/custom-impl.raw.jsx (1)

18-24: Updated getBaseProps usage looks correct for custom radio root

Passing the composed classes through getBaseProps({ className: ... }) keeps all root props (including the final className string) owned by the hook, which aligns with the intended usage and should avoid invalid className values on the rendered element. Please verify against the original reproduction that this example no longer triggers the console warning from the linked issue.

apps/docs/content/components/radio-group/custom-impl.raw.tsx (1)

21-27: Typed example correctly mirrors the new base-props pattern

Using getBaseProps({ className: cn(...) }) in the typed example matches the JS docs and the expected hook contract, so consumers copying this snippet will route their styles through the base props instead of overriding them on the component directly. Please confirm this TSX version also runs cleanly without console warnings in your local reproduction.

packages/components/radio/stories/radio.stories.tsx (1)

7-7: Stories now correctly demonstrate class composition via cn and getBaseProps

Using cn for the CustomRadio base slot and routing the RadioCard root styles through getBaseProps({ className: cn(...) }) keeps the examples aligned with the hook’s contract and the docs snippets, including the data-[selected=true]:border-primary selection styling. This should give consumers a clear, copy-pasteable pattern that doesn’t leak invalid className values down to DOM elements; worth double-checking that the Storybook stories no longer emit the warning from issue #5942.

Also applies to: 11-11, 367-371, 410-416

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5944

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5944

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5944

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5944

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5944

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5944

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5944

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5944

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5944

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5944

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5944

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5944

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5944

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5944

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5944

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5944

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5944

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5944

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5944

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5944

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5944

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5944

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5944

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5944

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5944

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5944

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5944

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5944

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5944

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5944

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5944

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5944

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5944

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5944

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5944

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5944

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5944

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5944

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5944

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5944

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5944

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5944

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5944

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5944

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5944

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5944

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5944

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5944

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5944

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5944

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5944

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5944

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5944

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5944

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5944

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5944

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5944

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5944

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5944

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5944

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5944

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5944

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5944

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5944

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5944

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5944

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5944

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5944

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5944

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5944

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5944

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5944

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5944

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5944

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5944

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5944

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5944

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5944

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5944

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5944

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5944

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5944

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5944

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5944

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5944

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5944

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5944

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5944

commit: d74d2fd