Radio

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

render(<Preview />)

const GroupEn = () => {
  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)'
        value='email'
        name='contact'
      />
      <Radio
        label='SMS'
        description='We will use the phone number you provided earlier (99 99 99 99)'
        value='sms'
        name='contact'
      />
      <Radio
        label='Letter'
        description='Delivery may take 3-5 working days, depending on the postal service.'
        value='letter'
        name='contact'
      />
    </Fieldset>
  );
};

render(<GroupEn />)

const WithErrorEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Which district do you live in?</Fieldset.Legend>
      <Fieldset.Description>
        Trondheim is divided into four districts
      </Fieldset.Description>
      <Radio label='Østbyen' value='ostbyen' name='city' aria-invalid='true' />
      <Radio
        label='Lerkendal'
        value='lerkendal'
        name='city'
        aria-invalid='true'
      />
      <Radio label='Heimdal' value='heimdal' name='city' aria-invalid='true' />
      <Radio
        label='Midtbyen'
        value='midtbyen'
        name='city'
        aria-invalid='true'
      />
      <ValidationMessage data-color='danger'>
        You must choose a district before you can continue.
      </ValidationMessage>
    </Fieldset>
  );
};

render(<WithErrorEn />)

const ReadOnlyEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Which district do you live in?</Fieldset.Legend>
      <Fieldset.Description>
        Trondheim is divided into four districts
      </Fieldset.Description>
      <Radio label='Østbyen' value='ostbyen' name='city' readOnly />
      <Radio label='Lerkendal' value='lerkendal' name='city' readOnly />
      <Radio label='Heimdal' value='heimdal' name='city' readOnly checked />
      <Radio label='Midtbyen' value='midtbyen' name='city' readOnly />
    </Fieldset>
  );
};

render(<ReadOnlyEn />)

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 />)