RadioButton

import { RadioButton } from '@adoptaunabuelo/react-components';
import { useState } from 'react';

function PaymentMethod() {
  const [selected, setSelected] = useState('credit-card');

  return (
    <div>
      <RadioButton
        id="credit-card"
        selected={selected === 'credit-card'}
        onClick={() => setSelected('credit-card')}
      >
        Credit Card
      </RadioButton>
      
      <RadioButton
        id="paypal"
        selected={selected === 'paypal'}
        onClick={() => setSelected('paypal')}
      >
        PayPal
      </RadioButton>
      
      <RadioButton
        id="bank-transfer"
        selected={selected === 'bank-transfer'}
        onClick={() => setSelected('bank-transfer')}
      >
        Bank Transfer
      </RadioButton>
    </div>
  );
}

import { RadioButtonList } from '@adoptaunabuelo/react-components';
import { useState } from 'react';

function SingleSelection() {
  const [selectedOption, setSelectedOption] = useState('option1');

  return (
    <RadioButtonList
      type="single"
      options={[
        {
          id: 'option1',
          children: 'Option 1',
          selected: true
        },
        {
          id: 'option2',
          children: 'Option 2'
        },
        {
          id: 'option3',
          children: 'Option 3'
        },
        {
          id: 'option4',
          children: 'Option 4'
        }
      ]}
      onChange={(selectedId) => setSelectedOption(selectedId)}
    />
  );
}

<RadioButtonList
  type="multiple"
  options={[
    { id: 'option1', children: 'Option 1' },
    { id: 'option2', children: 'Option 2' },
    { id: 'option3', children: 'Option 3' }
  ]}
  onChange={(selectedIds) => console.log(selectedIds)}
/>

<RadioButton
  id="disabled-option"
  selected={false}
  disabled={true}
>
  Disabled Option
</RadioButton>

<RadioButton
  id="custom-option"
  selected={isSelected}
  onClick={handleClick}
  style={{ padding: '16px', backgroundColor: '#f0f0f0' }}
>
  Custom Styled Option
</RadioButton>