How to modify active state in RadioGroup component?

[dytra]

Hi, so I'm copying the RadioGroup example in the payment method section from this page https://ui.shadcn.com/examples/cards

I'm having trouble to modify the active state for the RadioGroupItem

So I inspect the element, and turns out it has button to toggle the state changes

But from the RadioGroup component I didn't see the button component is implemented in this component.

Any idea where does this button from ?

[codeSomethingDaily]

The Button is created by radix-ui that you do not need to care unless you are customizing the behavior or the UI.
If you want to use controlled components, refer to the following example I created.

"use client";

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useEffect, useState } from "react";

export default function Home() {
  const [selectedValue, setSelectedValue] = useState<string | undefined>(
    undefined
  );

  useEffect(() => {
    if (selectedValue != null) {
      console.log(selectedValue);
    }
  }, [selectedValue]);
  return (
    <div>
      <RadioGroup
        name="demo"
        className="p-2"
        value={selectedValue}
        onValueChange={setSelectedValue}
      >
        <div className="flex flex-row items-center gap-2">
          <RadioGroupItem value="foo" id="foo" />
          <label htmlFor="foo">foo</label>
        </div>
        <div className="flex flex-row items-center gap-2">
          <RadioGroupItem value="bar" id="bar" />
          <label htmlFor="bar">bar</label>
        </div>
      </RadioGroup>
    </div>
  );
}