Hi guys,

i have some weird problems with a page server component and radio buttons in that component. I create my radio buttons based on some array and then i do this:

{colors.map((color,idx) => ( <input id={color[0]} name="icon-color" type="radio" checked={idx === 0} className="h-4 w-4 border-gray-300 text-tertiary focus:ring-tertiary" /> ))}

The problem is the checked attribute. As long as i dont use it, i can easily select the various radio buttons. But as soon as i put in the checked attr to have a default one selected on first load, i can't select a different one than the first pre-selected. Attached a screenshot where i try to select the green one but then i only got the focus ring but no selection. The idea is to keep this thing a server component and not to refactor out the RadioButtons to a seperate client component.

â–² Next.js 14.0.4

Thanks...