Fieldset

const Preview = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Hvilken fjordarm bor du ved?</Fieldset.Legend>
      <Fieldset.Description>
        Valget vil hjelpe oss å forbedre innholdet vi viser deg.
      </Fieldset.Description>
      <Radio label='Barsnesfjorden' name='radio' value='barsnesfjorden' />
      <Radio label='Eidsfjorden' name='radio' value='eidsfjorden' />
      <Radio label='Ingen av de' name='radio' value='ingen-av-de' />
    </Fieldset>
  );
};

render(<Preview />)

const WithCheckbox = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Godtar du vilkårene?</Fieldset.Legend>
      <Checkbox label='Ja, jeg godtar' value='agree' />
    </Fieldset>
  );
};

render(<WithCheckbox />)

const WithFields = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Personopplysninger</Fieldset.Legend>
      <Fieldset.Description>
        Fyll inn dine personopplysninger nedenfor.
      </Fieldset.Description>
      <Field>
        <Label>Fornavn</Label>
        <Input />
      </Field>
      <Field>
        <Label>Kjønn</Label>
        <Select>
          <Select.Option value='male'>Mann</Select.Option>
          <Select.Option value='female'>Kvinne</Select.Option>
          <Select.Option value='other'>Annet</Select.Option>
        </Select>
      </Field>
    </Fieldset>
  );
};

render(<WithFields />)

const ReadOnly = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Hvilken bydel bor du i?</Fieldset.Legend>
      <Fieldset.Description>
        Trondheim er delt inn i fire bydeler
      </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(<ReadOnly />)