nve-radio-group

Brukes til å gruppere radioknapper som hører sammen. Den kan inneholde både nve-radio og nve-radio-button. Pass på at nve-radio eller nva-radio-button har en value, ellers vil ikke radiogruppa fungere som forventet.

Arvet fra SlRadioGroup

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-radio-group.

 

<nve-radio-group label="Vennligst velg en av disse">
  <nve-radio value="valg1">1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
  <nve-radio value="valg3">3</nve-radio>
</nve-radio-group>

Eksempler

Med radioknapper

<nve-radio-group label="Vennligst velg en av disse">
  <nve-radio-button value="valg1">1</nve-radio-button>
  <nve-radio-button value="valg2">2</nve-radio-button>
  <nve-radio-button value="valg3">3</nve-radio-button>
</nve-radio-group>

Retning

Bruk orientation for å velge retning. vertical er standard.

<nve-radio-group label="vertical">
  <nve-radio value="valg1">1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
</nve-radio-group>
<br />
<nve-radio-group label="horizontal" orientation="horizontal">
  <nve-radio value="valg1">1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
</nve-radio-group>

Størrelse

Bruk size for å sette størrelse. medium er standard.

<nve-radio-group size="small" label="Vennligst velg en av disse">
  <nve-radio value="valg1">Valg 1</nve-radio>
  <nve-radio value="valg2">Valg 2</nve-radio>
</nve-radio-group>
<br />
<nve-radio-group label="Vennligst velg en av disse">
  <nve-radio value="valg1">Valg 1</nve-radio>
  <nve-radio value="valg2">Valg 2</nve-radio>
</nve-radio-group>
<br />
<nve-radio-group size="large" label="Vennligst velg en av disse">
  <nve-radio value="valg1">Valg 1</nve-radio>
  <nve-radio value="valg2">Valg 2</nve-radio>
</nve-radio-group>

Valgt verdi

value gir deg valgt radioknapp sin value. Klikk på elementet og sjekk konsollet for å se value.

<nve-radio-group label="Vennligst velg 1 eller 2" onclick="console.log('value er ' + value)">
  <nve-radio value="valg1">1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
</nve-radio-group>

Du kan også sette value selv.

<nve-radio-group label="Her er 2 valgt på forhånd" value="valg2">
  <nve-radio value="valg1">1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
</nve-radio-group>

Deaktivering

Bruk disabled for deaktivering. Dette gjelder for enkelt-elementer og for hele radiogruppen.

<nve-radio-group label="Gruppe hvor én knapp er deaktivert">
  <nve-radio value="valg1" disabled>1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
</nve-radio-group>

<nve-radio-group label="Gruppe som er helt deaktivert" disabled>
  <nve-radio value="valg1">1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
</nve-radio-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-radio-group label="Her må du velge noe" required errorMessage="Du må bestemme deg">
    <nve-radio value="valg1">1</nve-radio>
    <nve-radio value="valg2">2</nve-radio>
  </nve-radio-group>

  <nve-radio-group label="Please choose" required requiredLabel="*Required" errorMessage="Please decide">
    <nve-radio value="valg1">1</nve-radio>
    <nve-radio value="valg2">2</nve-radio>
  </nve-radio-group>

  <nve-button type="submit">Submit</nve-button>
</form>

Spor

Navn	Beskrivelse
Standard	slot hvor <nve-radio> eller <nve-radio-button> plasseres

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
orientation	'horizontal' | 'vertical' = 'vertical'		Om radio knapper skal vises horisontalt eller vertikalt
disabled	= false		Deaktivere alle radioknapper i gruppen
errorMessage	string		Feilmelding som vises under radiogruppe. Vi har ikke tilgang til SlRadioGroup errorMessage så må overskrive med vår egen
requiredLabel	= '*Obligatorisk'		Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.
testId	string = ''		Hjelpevariabel som sjekker om radio gruppe er allerede invalid

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handlePropChange	oldValue: unknown newValue: unknown