nve-checkbox-group

En gruppe med sjekkbokser som lar brukeren velge flere alternativer.

Arvet fra LitElement

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-checkbox-group.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Bruk nve-checkbox-group med nve-checkbox når brukeren skal kunne velge flere alternativer. Hvis brukeren bare skal kunne velge ett alternativ, bruk nve-radio-group i stedet. Ved mange alternativer vurder å bruke nve-combobox.

Hver nve-checkbox i gruppen bør ha value. Når et valg markeres eller fjernes, trigges change-hendelsen, og verdien fra den aktuelle sjekkboksen returneres i hendelsen sammen med handlingen som er utført (select eller deselect).

Hendelsestype kan importers ved:

import type { NveCheckboxGroupChangeEvent } from 'nve-designsystem/components/nve-checkbox-group/nve-checkbox-group.component.js';

Den returnerer:

type NveCheckboxGroupChangeEvent<T> = {
  value: string;
  action: 'select' | 'deselect';
}

Retningslinjer

Gi alltid feltet en tydelig label.
Bruk disabled med omhu. Deaktiverte felt kan ikke fokuseres og kan derfor være vanskeligere å oppdage med tastatur/skjermleser.
Gi hver sjekkboks en unik og stabil value i gruppen, slik at change-hendelsen alltid kan tolkes riktig.
Bruk tydelige og korte etiketter per valg, så brukeren raskt forstår forskjellen mellom alternativene.
Bruk vertikal visning når du har mange valg eller lange etiketter, for bedre lesbarhet.

Eksempler

Ledetekst

Bruk label for å vise en tydelig ledetekst for feltet. Attributtet er påkrevd – hvert skjemafelt skal ha en ledetekst som skjermlesere kan bruke for å forstå hva feltet gjelder.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Skjult ledetekst

Vi anbefaler å alltid vise ledeteksten. Hvis den i enkelte tilfeller må skjules av hensyn til utformingen, kan du bruke CSS til å skjule den visuelt. Ledeteksten er fortsatt tilgjengelig i DOM-en og kan leses av skjermlesere.

Bruk ::part(label) for å skjule ledeteksten.

Det kan også være nødvendig å sette margin-top: 0 på ::part(checkbox-group) for å fjerne avstanden over feltet.

html

<nve-checkbox-group class="hideLabel" label="Hvilke varsler vil du se på?">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

<style>
  .hideLabel::part(label) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hideLabel::part(checkbox-group) {
    margin-top: 0;
  }
</style>

Toggletip

Bruk sporet label-toggletip for å vise en toggletip ved siden av ledeteksten. Sporet er beregnet for en nve-toggletip-komponent.

Husk å legge til aria-label på nve-toggletip.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?">
  <nve-toggletip slot="label-toggletip" aria-label="Les mer om filtrering">
    <span>Ekstra info her.</span>
  </nve-toggletip>
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Påkrevd og Valgfritt

Det er ikke nødvendig å merke feltene som obligatoriske dersom flertallet av feltene er påkrevd. Brukeren må imidlertid informeres om dette før vedkommende begynner å fylle ut skjemaet. Dersom enkelte felt er valgfrie, skal disse merkes tydelig som valgfrie. Tilsvarende gjelder dersom flertallet av feltene er valgfrie – da skal de obligatoriske feltene merkes særskilt.

Bruk required for å sette feltet til obligatorisk, og bruk hideRequiredTag for å skjule merket «Må fylles ut» uten å endre at feltet er obligatorisk.

Bruk optional for å vise merket «Valgfritt».

html

<nve-checkbox-group label="Hvilke varsler vil du se på?" requried>
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

<nve-checkbox-group label="Hvordan ønsker du å motta varsler?" optional>
  <nve-checkbox value="epost">E-post</nve-checkbox>
  <nve-checkbox value="sms">SMS</nve-checkbox>
  <nve-checkbox value="push">Pushvarsler</nve-checkbox>
</nve-checkbox-group>

Ved annet språk, kan attributtene requiredLabel og optionalLabel tas i bruk. De erstatter teksten i henholdsvis required-merket og optional-merket, uten å legge til et nytt merke. Brukes sammen med required og optional attributtene. Standardtekstene er «Må fylles ut» og «Valgfritt» og skal ikke endres etter retningslinjene.

Retning

Bruk orientation for å velge retning:

vertical er standard og viser sjekkboksene under hverandre.
horizontal viser sjekkboksene ved siden av hverandre.

html

<nve-checkbox-group label="Hvilke varsler vil du se på (vertical)?">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

<nve-checkbox-group label="Hvilke varsler vil du se på (horizontal)?" orientation="horizontal">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Størrelse

Størrelsen kan styres på gruppenivå. Bruk size for å velge størrelse:

small
medium - er standard
large

html

<nve-checkbox-group label="Hvilke varsler vil du se på (small)?" size="small">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

<nve-checkbox-group label="Hvilke varsler vil du se på (medium)?">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

<nve-checkbox-group label="Hvilke varsler vil du se på (large)?" size="large">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Hjelpetekst

Bruk helpText for å vise hjelpetekst over feltet.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?" helpText="Ditt valg påvirker mange!">
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Hvis hjelpeteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke helpText-sporet.

Du kan ikke bruke helpText-attributtet og helpText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.

Se tilgjengelighet for informasjon om hvordan hjelpeteksten med en lenke bør struktureres.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?">
  <p slot="helpText">Se <a href="#">hvilke varsler som er tilgjengelige</a></p>
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
</nve-checkbox-group>

Hint

Bruk hintText for å vise hint-tekst under feltet.

html

<nve-checkbox-group
  label="Hvilke varsler vil du se på?"
  hint="Velg smart. Det finnes ingen vei tilbake fra dårlige valg."
>
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Hvis hintteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke hintText-sporet.

Du kan ikke bruke hint-attributtet og hintText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.

Se tilgjengelighet for informasjon om hvordan hint med en lenke bør struktureres.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?">
  <p slot="hintText">Les om <a href="#">hva de ulike varslene betyr</a></p>
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
</nve-checkbox-group>

Deaktivert

Et deaktivert felt (disabled) kan ikke få fokus og blir derfor ofte ikke oppdaget av brukere som navigerer med tastatur eller skjermleser. Bruk disabled med omhu, og vurder å gi en tydelig forklaring i tekst på hvorfor feltet er deaktivert.

Bruk attributtet disabled for å hindre at verdien kan endres i hele gruppen. For å deaktivere enkelte sjekkbokser, bruk disabled direkte på dem.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?" disabled>
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Forhåndsvalgte verdier

Bruk selectedValues-array for å vise forhåndsvalgt verdier. Verdier må samsvare med value-attributtet til en av nve-checkbox-komponentene i gruppen.

html

<nve-checkbox-group label="Hvilke varsler vil du se på?" selectedValues='["flood", "landslide"]'>
  <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
  <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
  <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>

Validering

For mer informasjon om hvordan nve-checkbox-group og andre skjemakomponenter valideres, se siden om validering.

Intern validering

Intern validering gjør det mulig å validere verdien i nve-checkbox-group ved hjelp av valideringsregler.

Verdien er et array med de valgte avkrysningsboksene.

Valideringsreglene kjøres når du kaller validateForm() i skjemaets submit-handler.

Du kan importere metoden slik:

import { validateForm } from 'nve-designsystem/validation/validateForm.js';

html

<form id="test-form" class="form">
  <nve-checkbox-group id="chgr" required label="Hvilke varsler vil du se på?">
    <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
    <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
    <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
  </nve-checkbox-group>

  <nve-button type="submit">Send inn</nve-button>
</form>

<script type="module">
  const form = document.querySelector('#test-form');
  const chgr = document.querySelector('#chgr');

  chgr.validationRules = [
    (value) => rules.required(value) || 'Du må velge minst én',
    (value) => value.length >= 2 || 'Minimum 2 valg',
  ];

  form?.addEventListener('submit', (event) => {
    event.preventDefault();
    validateForm(event);
  });
</script>

Ekstern validering

Bruker du et eksternt valideringssystem, kan du sette komponenten i feiltilstand ved hjelp av errorMessage.

html

<form id="test-form" class="form">
  <nve-checkbox-group label="Hvilke varsler vil du se på?" required errorMessage="Du må velge minst én.">
    <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
    <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
    <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
  </nve-checkbox-group>
</form>

Du kan fjerne feiltilstanden ved å sette errorMessage til en tom streng.

html

<form id="test-form" class="form">
  <nve-checkbox-group label="Hvilke varsler vil du se på?" errorMessage="">
    <nve-checkbox value="flood">Flomvarsel</nve-checkbox>
    <nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
    <nve-checkbox value="rain">Regnvarsel</nve-checkbox>
  </nve-checkbox-group>
</form>

Tilgjengelighet

nve-checkbox-group bruker en tilknyttet ledetekst. Når feltet får fokus vil skjermlesere lese opp ledeteksten, slik at brukeren forstår hva som skal fylles inn.

I tillegg brukes aria-describedby for å knytte supplerende tekst til feltet. Når helpText, hint eller errorMessage er satt vil skjermlesere normalt lese dem opp i forbindelse med fokus på feltet. (VoiceOver i Safari på macOS kan slite litt med aria-describedby og ikke lese den).

Hvis hjelpeteksten eller hintet inneholder en lenke, bør lenketeksten beskrive hva brukeren finner når lenken åpnes. Unngå generelle tekster som "Les mer". Da gir lenken mening også når den leses opp sammen med gruppens ledetekst, eller navigeres til separat med skjermleser.

Brukere kan navigere gjennom sjekkboksene i gruppen ved å trykke Tab for å fokusere hver sjekkboks. Når en sjekkboks har fokus, brukes Space-tasten til å velge eller fjerne valget.

Spor

Navn	Beskrivelse
-	Her plasseres nve-checkbox elementer som skal være en del av gruppen.
helpText	- viser hjelpetekst over inputfeltet
hintText	- viser hint-tekst under inputfeltet

Hendelser

Navn	Arvet fra	Beskrivelse
change		- når en sjekkboks i gruppen endres, sender ut en event med informasjon om hvilken verdi som ble endret og om den ble valgt eller fjernet.

Egenskaper

Navn	Type	Beskrivelse
testId	string \| undefined = undefined
disabled	= false	Om sjekkboks-gruppen er deaktivert
errorMessage	string \| undefined = undefined	Feilmelding som vises ved valideringsfeil. Hvis den er satt blir input-felt ugyldig og feil melding vises.
helpText	string = undefined	Hjelpetekst som vises over feltet
hint	string = undefined	Hint-tekst som vises under feltet
label	string = undefined	Ledetekst
orientation	'horizontal' \| 'vertical' = 'vertical'	Om gruppa skal vises horisontalt eller vertikalt
required	= false	Om minst en sjekkboks er sjekket på
optional	= false	Om avkrysningsgruppen er valgfri
requiredLabel	string = undefined	Tekst som vises i merket for obligatoriske felt
optionalLabel	string = undefined	Tekst som vises i merket for valgfrie felt
hideRequiredTag	= false	Om merket for obligatoriske felt skal skjules
selectedValues	string[] = []	Initialt valgte verdier
size	'small' \| 'medium' \| 'large' = 'medium'	Størrelse på sjekkboksene
tooltip	string = undefined	Tooltip-tekst for label
validationRules	Array<ValidationRule> = []

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
validate

Deler

Navn	Beskrivelse
base	- fieldset elementet som omslutter hele gruppen
label	- label elementet som viser ledeteksten for gruppen
checkbox-group	- div elementet som omslutter slottet med sjekkboksene
help-text	- p elementet som viser hjelpetekst, hvis satt
hint-text	- p elementet som viser hint-tekst eller feilmelding, hvis satt
error-text	- p elementet som viser feilmelding, hvis satt

nve-checkbox-group

Feil / oppgaver / PR ​

Retningslinjer ​

Eksempler ​

Ledetekst ​

Skjult ledetekst ​

Toggletip ​

Påkrevd og Valgfritt ​

Retning ​

Størrelse ​

Hjelpetekst ​

Hint ​

Deaktivert ​

Forhåndsvalgte verdier ​

Validering ​

Intern validering ​

Ekstern validering ​

Tilgjengelighet ​

Spor ​

Hendelser ​

Egenskaper ​

Metoder ​

Deler ​

Feil / oppgaver / PR

Retningslinjer

Eksempler

Ledetekst

Skjult ledetekst

Toggletip

Påkrevd og Valgfritt

Retning

Størrelse

Hjelpetekst

Hint

Deaktivert

Forhåndsvalgte verdier

Validering

Intern validering

Ekstern validering

Tilgjengelighet

Spor

Hendelser

Egenskaper

Metoder

Deler