Fieldset

Unable to parse html

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

Bruk fieldset når

• du har en gruppe eller liste med flere radio eller checkbox som hører naturlig sammen
• et skjema skal deles i seksjoner med forklarende ledetekster
• flere felt naturlig hører sammen for eksempel kontaktinformasjon

Unngå fieldset når

• du skal gruppere elementer som ligger utenfor et skjema
• feltene ikke deler et felles formål

Eksempel

Én checkbox i et fieldset

Selv om en gruppe kun består av én checkbox eller radio, bør den fortsatt ligge inne i et fieldset. Da får valget en tydelig ledetekst via <legend>, og brukere med skjermleser forstår hva de bekrefter.

Unable to parse html

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

render(<WithCheckbox />)

Legend som heading

Å bruke selve spørsmålet som overskrift er god praksis i mange tilfeller, fordi brukere med skjermleser da bare hører spørsmålet én gang.

På sider med flere inndatafelt, men som omfavner det samme spørsmålet, blir det enklere for brukere med skjermleser om spørsmålet er en overskrift. Dette gjør det lettere å forstå at alle feltene som følger hører til samme gruppe som overskriften.

I eksempelet under bruker vi <h1>, som da hadde stått som hovedoverskrift for siden, men samtidig <legend>.

Unable to parse html

const LegendAsHeading = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>
        <h1>Hvor skal du reise?</h1>
      </Fieldset.Legend>
    </Fieldset>
  );
};

render(<LegendAsHeading />)

Retningslinjer

Når du bruker fieldset, skal du starte med en <legend> som forklarer hva feltene under handler om. Det kan være et spørsmål som «Hvor bor du nå?» eller en beskrivende setning som «Personopplysninger». Dette hjelper brukeren med å forstå sammenhengen mellom feltene og hva de skal fylle ut.

Tekst

Unngå å bruke samme tekst i både <label> og <legend>. Ha gjerne med en hjelpetekst hvis det gjør det enklere for brukerne å fylle ut skjemaet. Merk at beskrivelsen ikke blir koblet til input-feltene. Lag teksten så kort som mulig.

Les mer om hvordan du skriver ledetekster og spørsmål i skjema.