mui / mui/base-ui

[radio group] Allow controlling the render of the hidden `input` as well, not just the `button`

Open
#3,143 8 comments 0 reactions 0 assignees View on GitHub
component: radio group
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

When using `Radio.Root`'s `render` prop, whatever we return only replaces the `button` that `Radio.Root` normally renders, but there's no way to control where/how to render the hidden `input` that it renders beside it. I would expect that level of control from a headless component.

## Examples in other libraries

Not sure.

## Motivation

I would like to wrap the `button` and `input` that `Radio.Root` renders in a `div` or something so that Tailwind classes starting with `last:` or `only:` work as expected (they don't because the `button` which receives the class is _never_ the last or only child, due to the `input` that gets rendered beside it). Of course, I could wrap `Radio.Root` itself and set the `last:`/`only:` classes on the wrapper `div`, but in my case, I actually want to set the classes conditionally on `state` that is only available in `Radio.Root`'s `render` (namely `checked`)...

Thank you for considering this. 🙏

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.