nve-checkbox-group
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.
<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.
<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>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.
<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
Bruk required for å vise et stjernesymbol på slutten av ledeteksten som markerer at feltet er påkrevd.
Bruk i tillegg requiredLabel for å vise en forklarende tekst sammen med stjernen (for eksempel 'obligatorisk'). Dette gir brukerne en bedre forståelse av at feltet er påkrevd, siden ikke alle brukere forstår eller oppfatter stjernesymbolet alene.
<nve-checkbox-group label="Hvilke varsler vil du se på?" required requiredLabel="Obligatorisk">
<nve-checkbox value="flood">Flomvarsel</nve-checkbox>
<nve-checkbox value="landslide">Jordskredvarsel</nve-checkbox>
<nve-checkbox value="rain">Regnvarsel</nve-checkbox>
</nve-checkbox-group>Retning
Bruk orientation for å velge retning:
- vertical er standard og viser sjekkboksene under hverandre.
- horizontal viser sjekkboksene ved siden av hverandre.
<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
<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.
<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>Hint
Bruk hintText for å vise hint-tekst under feltet.
<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>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.
<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.
<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';<form id="test-form" class="form">
<nve-checkbox-group id="chgr" 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.
<form id="test-form" class="form">
<nve-checkbox-group label="Hvilke varsler vil du se på?" 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.
<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).
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. |
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 | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| testId | string | undefined = undefined | |||
| disabled | = false | Om sjekkboks-gruppen er deaktivert | ||
| errorMessage | = '' | 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å | ||
| requiredLabel | string = undefined | Tekst som vises for å markere at et felt er obligatorisk | ||
| 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 |
| 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 |