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

<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

TODO: Dette funker ikke. Lage et Vue-eksempel i stedet?

selectedValues gir deg en liste av valgte avkrysningsbokser sin value. Klikk på elementet og sjekk konsollet for å se selectedValues.

<nve-checkbox-group label="Vennligst velg 1 eller 2" onclick="console.log('selectedValues er ' + selectedValues)">
  <nve-checkbox value="value1">1</nve-checkbox>
  <nve-checkbox value="value2">2</nve-checkbox>
</nve-checkbox-group>

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	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
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
showErrorMessage		boolean	false		Bestemmer om feilmelding skal vises når validering feiler
isCustomValidationError		boolean	false		Status for tilpasset validering. Den trengs for å kunne kjøre både constraint- og tilpasset validering samtidig.
updateSelectedValues					Oppdaterer selectedValues property hver gang man endrer noen av sjekkbokser i sjekkboksgruppa.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
firstUpdated
updated	changedProperties: any
setCustomValidity	message:			En 'fake' metode som gjør custom validering enklere på checkbox-group komponent
handleSubmit	e: SubmitEvent
handleChange	e: Event
checkValidity				Sjekker validity basert på constraint validation. Man kan legge til flere properties.
toggleValidationAttributes	isValid: boolean			Toggler riktig validering attribute for å vise riktig style
resetValidation
makeInvalid
checkIfRequiredValid		boolean
render