Checkbokspanelgruppe

Denne komponenten bør benyttes hvis brukeren må utføre en viktig flervalgsoppgave som fortjener større plass på skjermen.

Normal

Velg en eller flere:

EplejuiceAppelsinjuiceMelkAnanasjuiceSubtext example

<CheckboksPanelGruppe
  legend={"Velg en eller flere:"}
  checkboxes={[
    { label: "Eplejuice", value: "juice1", id: "juice1id" },
    { label: "Appelsinjuice", value: "juice2", id: "juice2id" },
    { label: "Melk", value: "melk", disabled: true, id: "melkid" },
    {
      label: "Ananasjuice",
      value: "juice3",
      id: "juice4id",
      subtext: "Subtext example",
    },
  ]}
  onChange={() => {}}
/>
 Kopiert!

Komponenten bør som regel inneholde minst to svaralternativer. Hvis det kun er ett svaralternativ bør man heller bruke en vanlig sjekkboks.

Feilmelding

Velg en eller flere:

EplejuiceAppelsinjuiceMelkAnanasjuiceSubtext example

Feilmeldingstekst må gjenta nøkkelord fra label

<CheckboksPanelGruppe
  legend={"Velg en eller flere:"}
  checkboxes={[
    { label: "Eplejuice", value: "juice1", id: "juice1id" },
    { label: "Appelsinjuice", value: "juice2", id: "juice2id" },
    { label: "Melk", value: "melk", disabled: true, id: "melkid" },
    {
      label: "Ananasjuice",
      value: "juice3",
      id: "juice4id",
      subtext: "Subtext example",
    },
  ]}
  onChange={() => {}}
  feil="Feilmeldingstekst må gjenta nøkkelord fra label"
/>
 Kopiert!

Feilmelding uten propagering av feil-prop til children

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

Velg en eller flere:

EplejuiceAppelsinjuiceMelkAnanasjuiceSubtext example

Feilmeldingstekst må gjenta nøkkelord fra label

<CheckboksPanelGruppe
  legend={"Velg en eller flere:"}
  checkboxes={[
    { label: "Eplejuice", value: "juice1", id: "juice1id" },
    { label: "Appelsinjuice", value: "juice2", id: "juice2id", feil: true },
    { label: "Melk", value: "melk", disabled: true, id: "melkid" },
    {
      label: "Ananasjuice",
      value: "juice3",
      id: "juice4id",
      subtext: "Subtext example",
    },
  ]}
  onChange={() => {}}
  feil="Feilmeldingstekst må gjenta nøkkelord fra label"
  utenFeilPropagering
/>
 Kopiert!

Rediger siden på Github