Radio

const Preview = () => {
  return <Radio label='Radio' value='value' name='name' />;
};

render(<Preview />)

const GroupEn = () => {
  const { getRadioProps } = useRadioGroup({
    name: 'contact',
    value: 'email',
  });

  return (
    <Fieldset>
      <Fieldset.Legend>How would you like us to contact you?</Fieldset.Legend>
      <Fieldset.Description>
        Choose the method that works best for you. We use this only to send
        important updates about your case.
      </Fieldset.Description>
      <Radio
        label='Email'
        description='We will use the email address you provided earlier (name@example.com)'
        {...getRadioProps('email')}
      />
      <Radio
        label='SMS'
        description='We will use the phone number you provided earlier (99 99 99 99)'
        {...getRadioProps('sms')}
      />
      <Radio
        label='Letter'
        description='Delivery may take 3-5 working days, depending on the postal service.'
        {...getRadioProps('letter')}
      />
    </Fieldset>
  );
};

render(<GroupEn />)

const OutlineEn = () => {
  const { getRadioProps } = useRadioGroup({
    name: 'course-level',
    variant: 'outline',
  });

  return (
    <Fieldset>
      <Fieldset.Legend>Which course level fits you best?</Fieldset.Legend>
      <Fieldset.Description>
        Choose the level that best describes your experience with the topic.
      </Fieldset.Description>
      <Radio
        label='Beginner'
        description='Best for you if you are completely new and want a gentle introduction.'
        {...getRadioProps('beginner')}
      />
      <Radio
        label='Intermediate'
        description='Best for you if you know the basics and want to go deeper.'
        {...getRadioProps('intermediate')}
      />
      <Radio
        label='Expert'
        description='Best for you if you want advanced topics and hands-on cases.'
        {...getRadioProps('expert')}
      />
    </Fieldset>
  );
};

render(<OutlineEn />)

const InlineEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Contact by email?</Fieldset.Legend>
      <Fieldset.Description>
        Confirm whether you would like to be contacted by email.
      </Fieldset.Description>
      <div
        style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ds-size-6)' }}
      >
        <Radio name='my-inline' label='Yes' value='yes' />
        <Radio name='my-inline' label='No' value='no' />
      </div>
    </Fieldset>
  );
};

render(<InlineEn />)

const ReadOnly = () => (
  <Radio label='Radio' value='value' name='name' readOnly />
);

render(<ReadOnly />)