Skip to content

Radio Button Ignores "defaultChecked" Property on First Render #51932

@sam-hieken

Description

@sam-hieken

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8-canary.8
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/sam-hieken/nextjs-reproduce-radio

To Reproduce

  1. Run with npm run dev
  2. Navigate to the home page (http://localhost:3000) to observe the issue

Describe the Bug

If a client component contains radio buttons (I have not tried reproducing with checkboxes), the defaultChecked property will be ignored upon the first render.

The radio button still has a checked attribute however; it just won't be filled in upon the first render. On a side note, the result of this is that the :checked pseudo class has no effect on the first render, but using the attribute selector [checked] works as expected.

Expected Behavior

The radio button marked as defaultChecked should display itself as a checked radio button upon the first render of the page.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.locked

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions