Skjemagruppe

Normal/Fieldset

I sin enkleste from er SkjemaGruppe bare en fieldset-wrapper som sørger for semantisk gruppering av et sett med skjemafelter. Skjemaelementer i en SkjemaGruppe får som default 1rem vertikal avstand til hverandre.

<SkjemaGruppe>
  <Input label="Fornavn" />
  <Input label="Etternavn" />
</SkjemaGruppe>
 Kopiert! 

Legend

Normal

Du kan også gi skjemagruppen en felles overskrift (legend):

<SkjemaGruppe legend="Kontaktperson">
  <Input label="Fornavn" />
  <Input label="Etternavn" />
</SkjemaGruppe>
 Kopiert! 

Custom styling

Du kan også sende inn en annen Typografi-komponent for å overstyre default legend-styling.

<SkjemaGruppe legend={<Undertittel>Kontaktperson</Undertittel>}>
  <Input label="Fornavn" />
  <Input label="Etternavn" />
</SkjemaGruppe>
 Kopiert! 

Innhold mellom legend og skjemagruppe

Bruk description-propen for å legge inn egendefinert HTML-innhold mellom legend og skjemagruppen.

<SkjemaGruppe
  legend="Kontaktperson"
  description="Personen som noen kan kontakte"
>
  <Input label="Fornavn" />
  <Input label="Etternavn" />
</SkjemaGruppe>
 Kopiert! 

Grupper av radio- og checkboxer

Skjemagrupper brukes vanligvis for å gruppere flere radioknapper eller checkboxer. For slike grupper har vi laget egne RadioGruppe- og CheckboxGruppe-komponenter for at disse skal bli stylet slik at avstanden mellom elementene blir litt mindre og for at legend skal bli seende ut som en vanlig label:

RadioGruppe

<RadioGruppe legend="Hvor vil du sitte?">
  <Radio label={"Bakerst"} name="sitteplass" />
  <Radio label={"Midten"} name="sitteplass" />
  <Radio label={"Fremst"} name="sitteplass" />
</RadioGruppe>
 Kopiert! 

CheckboxGruppe

<CheckboxGruppe legend="Hvor vil du sitte?">
  <Checkbox label={"Bakerst"} />
  <Checkbox label={"Midten"} />
  <Checkbox label={"Fremst"} />
</CheckboxGruppe>
 Kopiert! 

Felles feilmelding

<SkjemaGruppe feil="Her er det noe feil">
  <Input label="Fornavn" />
  <Input label="Etternavn" />
  <TextareaControlled label="Textarea-label" />
</SkjemaGruppe>
 Kopiert! 

Uten propagering av feil-prop til children

Bruk utenFeilPropagering-propen for å bestemme om feil-propen til SkjemaGruppe skal propageres til children.

<SkjemaGruppe feil="Her er det noe feil" utenFeilPropagering>
  <Input label="Fornavn" />
  <Input label="Etternavn" feil="Feilen er her!" />
  <Input label="Adresse" />
</SkjemaGruppe>
 Kopiert! 

Custom element

Du kan også selv bestemme hvilket HTML-element som SkjemaGruppe skal rendres som. Default er som nevnt fieldset, men du kan overstyre dette via tag-propen:

<SkjemaGruppe tag="div">
  <Input label="Fornavn" />
  <Input label="Etternavn" />
</SkjemaGruppe>
 Kopiert!