nve-checkbox-group

Bruk denne for å håndtere flere avkrysningsbokser (nve-checkbox) som hører sammen. selectedValues inneholder `value` til hver av avkrysningsboksene som er valgt i gruppa. Gruppa oppdaterer seg automatisk når man klikker på en avkrysningsboks. Støtter både constraint validation (kun `required`) og tilpasset validering. Tilpasset validering prioriteres foran `required`.

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="Vennligst velg 1 og/eller 2">
  <nve-checkbox>1</nve-checkbox>
  <nve-checkbox>2</nve-checkbox>
</nve-checkbox-group>

Eksempler

Retning

Bruk orientation for å velge retning. vertical er standard.

<nve-checkbox-group label="vertical">
  <nve-checkbox>1</nve-checkbox>
  <nve-checkbox>2</nve-checkbox>
</nve-checkbox-group>
<nve-checkbox-group label="horizontal" orientation="horizontal">
  <nve-checkbox>1</nve-checkbox>
  <nve-checkbox>2</nve-checkbox>
</nve-checkbox-group>

Valgte verdier

selectedValues gir deg en liste av valgte avkrysningsbokser sin value

<template>
  <nve-checkbox-group label="Vennligst velg 1 eller 2" :selectedValues="result">
    <nve-checkbox value="value1">1</nve-checkbox>
    <nve-checkbox value="value2">2</nve-checkbox>
  </nve-checkbox-group>
  Du har valgt: {{ result }}
</template>

<script setup lang="ts">
import 'nve-designsystem/components/nve-checkbox-group/nve-checkbox-group.component.js';
import 'nve-designsystem/components/nve-checkbox/nve-checkbox.component.js';
import { ref } from 'vue';

const result = ref<string[]>([]);
</script>

Hjelpetekst

Bruk tooltip for å legge til et info-ikon etter ledetekst. Ikonet vises ikke hvis ikke label er satt.

<nve-checkbox-group label="Svev over ikonet for å se hjelpeteksten" tooltip="Hjelpetekst">
  <nve-checkbox>1</nve-checkbox>
  <nve-checkbox>2</nve-checkbox>
</nve-checkbox-group>

Deaktivering

Bruk disabled for å deaktivere hele gruppa.

<nve-checkbox-group label="disabled" disabled>
  <nve-checkbox>1</nve-checkbox>
  <nve-checkbox>2</nve-checkbox>
</nve-checkbox-group>

<nve-checkbox-group label="enabled">
  <nve-checkbox>1</nve-checkbox>
  <nve-checkbox>2</nve-checkbox>
</nve-checkbox-group>

Obligatorisk

Bruk required for å tvinge bruker til å velge minst ett av valgene i gruppa og legg inn en feilmelding i errorMessage. Bruk requiredlabel hvis du vil vise noe annet enn *Obligatorisk. Gruppa må ligge i en <form> for at validering skal funke.

<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
  <nve-checkbox-group label="Her må du velge noe" required errorMessage="Velg minst en">
    <nve-checkbox>1</nve-checkbox>
    <nve-checkbox>2</nve-checkbox>
  </nve-checkbox-group>
  <nve-checkbox-group
    label="Please choose at least one"
    required
    requiredLabel="*Required"
    errorMessage="Please choose at least one"
  >
    <nve-checkbox>1</nve-checkbox>
    <nve-checkbox>2</nve-checkbox>
  </nve-checkbox-group>
  <nve-button type="submit">Submit</nve-button>
</form>

Spor

Navn	Beskrivelse
default	legg avkrysningsboksene inni denne.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
disabled	boolean = false		Deaktiverer alle sjekkbokser hvis 'true'
required	boolean = false		Om minst en sjekkboks er sjekket på
label	string | undefined		Ledetekst
tooltip	string | undefined		Viser i-ikon og hjelpetekst ved siden av label. Du må ha en label for å bruke denne.
orientation	'horizontal' | 'vertical' = 'vertical'		Om gruppa skal vises horisontalt eller vertikalt
errorMessage	string | undefined		Feilmelding som vises under gruppe hvis validering feiler
requiredLabel	string = '*Obligatorisk'		Tekst som vises for å markere at et felt er obligatorisk
selectedValues	string[] | undefined		Returnerer en tabell av value-attributet til alle sjekkbokser som er valgt. Man kan lagre både primitiver og objekter i selectedValues.
slot	any

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
setCustomValidity	message:			En 'fake' metode som gjør custom validering enklere på checkbox-group komponent