Fieldset

const PreviewEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Which fjord arm do you live by?</Fieldset.Legend>
      <Fieldset.Description>
        The choice will help us improve the content we show you.
      </Fieldset.Description>
      <Radio label='Barsnesfjorden' name='radio' value='barsnesfjorden' />
      <Radio label='Eidsfjorden' name='radio' value='eidsfjorden' />
      <Radio label='None of these' name='radio' value='none-of-these' />
    </Fieldset>
  );
};

render(<PreviewEn />)

const WithCheckboxEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Do you accept the terms?</Fieldset.Legend>
      <Checkbox label='Yes, I accept' value='agree' />
    </Fieldset>
  );
};

render(<WithCheckboxEn />)

const WithFieldsEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Personal information</Fieldset.Legend>
      <Fieldset.Description>
        Fill in your personal information below.
      </Fieldset.Description>
      <Field>
        <Label>First name</Label>
        <Input />
      </Field>
      <Field>
        <Label>Gender</Label>
        <Select>
          <Select.Option value='male'>Male</Select.Option>
          <Select.Option value='female'>Female</Select.Option>
          <Select.Option value='other'>Other</Select.Option>
        </Select>
      </Field>
    </Fieldset>
  );
};

render(<WithFieldsEn />)

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