mui / mui/base-ui

[radio group] No name attribute on input if no radio checked

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

Description

# Bug report

## Current behavior

When a radio groups' "hidden" input is initially rendered and no/no valid defaultValue or no radios have been checked the hidden input's name attribute is missing. This seems intentionally set:

```TSX
const inputProps = mergeProps<'input'>(
{
value: serializedCheckedValue,
ref: mergedInputRef,
id,
name: serializedCheckedValue ? name : undefined,
disabled,
readOnly,
required,
'aria-labelledby': elementProps['aria-labelledby'] ?? fieldsetContext?.legendId,
'aria-hidden': true,
tabIndex: -1,
style: visuallyHidden,
onChange: NOOP, // suppress a Next.js error
onFocus() {
controlRef.current?.focus();
},
},
validation.getInputValidationProps,
);
```

Specifically: `name: serializedCheckedValue ? name : undefined,`

When using a UI library that relies on an inputs' name field, this breaks as the input is treated as non existent

## Expected behavior

I would expect the hidden input to have a name attribute even if no value is selected.

## Reproducible example

https://codesandbox.io/p/sandbox/dfjwhl

## Base UI version

v1.0.0-beta.6

## Which browser are you using?

Firefox/Chrome

## Which OS are you using?

Mac OS/Windows

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.