RadioBox

const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(null);

  return (
    <RadioGroup
      name="cardType"
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event?.target.value);
      }}
      direction="column"
      className="gap-8"
    >
      <RadioBox
        label="Administrator"
        description="An admin can set-up the account"
        value="administrator"
      />
      <RadioBox
        label="Controller"
        description="A controller has access to all accounting features"
        value="controller"
      />
      <RadioBox
        label="Requester"
        description="A requester can request and make purchases"
        value="requester"
      />
    </RadioGroup>
  );
};

const Demo = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(
    "administrator"
  );

  return (
    <RadioGroup
      name="cardType"
      value={selectedValue}
      onChange={(event) => {
        setSelectedValue(event?.target.value);
      }}
      direction="column"
      className="gap-8"
    >
      <RadioBox
        label="Administrator"
        description="An admin can set-up the account"
        value="administrator"
      />
      <RadioBox
        label="Controller"
        description="A controller has access to all accounting features"
        value="controller"
      />
      <RadioBox
        label="Requester"
        description="A requester can request and make purchases"
        value="requester"
      />
    </RadioGroup>
  );
};

<RadioGroup {...otherProps}>
  <RadioBox
    iconName="single-purchase-card"
    label="Single use"
    description="If you need to make a one-time payment"
    value="singleUse"
  />
  <RadioBox
    iconName="recurring-card"
    label="Recurring"
    description="If you want to manage your subscriptions"
    value="recurring"
  />
</RadioGroup>

<RadioGroup {...otherProps}>
  <RadioBox label="Yes" value="yes" />
  <RadioBox label="No" value="no" />
</RadioGroup>