Radio Group

yarn add @twilio-paste/radio-group

import { RadioGroup, Radio } from '@twilio-paste/radio-group';

const MyComponent = () => {
  const [value, setValue] = React.useState('option1');
  
  return (
    <RadioGroup
      name="example"
      legend="Choose an option"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    >
      <Radio value="option1">Option 1</Radio>
      <Radio value="option2">Option 2</Radio>
      <Radio value="option3">Option 3</Radio>
    </RadioGroup>
  );
};

import { RadioGroup, Radio } from '@twilio-paste/radio-group';

const [plan, setPlan] = React.useState('starter');

<RadioGroup
  name="plan"
  legend="Select a plan"
  value={plan}
  onChange={setPlan}
>
  <Radio value="starter">Starter - $10/month</Radio>
  <Radio value="professional">Professional - $25/month</Radio>
  <Radio value="enterprise">Enterprise - Custom pricing</Radio>
</RadioGroup>

import { RadioGroup, Radio } from '@twilio-paste/radio-group';

<RadioGroup
  name="delivery"
  legend="Delivery method"
  helpText="Choose how you'd like to receive your order"
>
  <Radio value="standard" helpText="5-7 business days">
    Standard shipping
  </Radio>
  <Radio value="express" helpText="2-3 business days">
    Express shipping
  </Radio>
  <Radio value="overnight" helpText="Next business day">
    Overnight shipping
  </Radio>
</RadioGroup>

import { RadioGroup, Radio } from '@twilio-paste/radio-group';

<RadioGroup
  name="priority"
  legend="Priority level"
  required
  errorText="Please select a priority level to continue"
>
  <Radio value="low">Low</Radio>
  <Radio value="medium">Medium</Radio>
  <Radio value="high">High</Radio>
</RadioGroup>

import { RadioGroup, Radio } from '@twilio-paste/radio-group';

<RadioGroup
  name="size"
  legend="T-shirt size"
  orientation="horizontal"
>
  <Radio value="small">S</Radio>
  <Radio value="medium">M</Radio>
  <Radio value="large">L</Radio>
  <Radio value="xlarge">XL</Radio>
</RadioGroup>

import { RadioGroup, Radio } from '@twilio-paste/radio-group';

<RadioGroup
  name="availability"
  legend="Choose a time slot"
>
  <Radio value="morning">Morning (9am - 12pm)</Radio>
  <Radio value="afternoon" disabled>
    Afternoon (12pm - 5pm) - Fully booked
  </Radio>
  <Radio value="evening">Evening (5pm - 8pm)</Radio>
</RadioGroup>

import { RadioGroup, Radio } from '@twilio-paste/radio-group';

const [paymentMethod, setPaymentMethod] = React.useState('');

const handlePaymentChange = (value: string) => {
  setPaymentMethod(value);
  // Additional logic when selection changes
  console.log('Payment method selected:', value);
};

<RadioGroup
  name="payment"
  legend="Payment method"
  value={paymentMethod}
  onChange={handlePaymentChange}
  required
>
  <Radio value="credit">Credit card</Radio>
  <Radio value="debit">Debit card</Radio>
  <Radio value="paypal">PayPal</Radio>
</RadioGroup>