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.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

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 å deaktivere hele gruppa. TODO: Dette virker ikke, må fikses. Men du kan deaktivere enkelt-elementer i gruppa.

<nve-radio-group label="disabled" disabled>
  <nve-radio value="valg1">1</nve-radio>
  <nve-radio value="valg2">2</nve-radio>
</nve-radio-group>

<nve-radio-group label="enabled">
  <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
(standard)	The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
label	The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
help-text	Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-change	SlRadioGroup	Emitted when the radio group's selected value changes.
sl-input	SlRadioGroup	Emitted when the radio group receives user input.
sl-invalid	SlRadioGroup	Emitted when the form control has been checked for validity and its constraints aren't satisfied.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
orientation	string = 'vertical'		= horizontal eller vertical - Om radiogruppen skal vises vannrett eller loddrett
disabled	boolean = false		= deaktivere eller aktivere gruppen med radioknapper
errorMessage	string | undefined		Feilmelding som vises under radiogruppe. Vi har ikke tilgang til SlRadioGroup errorMessage så må overskrive med vår egen
requiredLabel	string = '*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
alreadyInvalid	boolean = false
errorMessageCopy	string = ''		Ikke mulig å få taket i errorMessage til superklassen (SlRadioGroup), og den trengs for å vise feilmelding under radio gruppe. Samtidig errorMessage fra SlRadioGroup (som er tom, som deretter gir oss default nettleseren sin melding) overskriver NveRadioGroup errorMessage prop når sl-input trigges, derfor må vi lagre den i staten når komponenten renderes første gang.
getAllRadios	= function () { // Lagt til nve-radio og nve-radio-button return [ // @ts-expect-error - bruk av this i private metode ...this.querySelectorAll<SlRadio | SlRadioButton | NveRadio | NveRadioButton>( 'sl-radio, sl-radio-button, nve-radio, nve-radio-button' ), ]; }
handleRadioClick	= function (event) { // Lagt til nve-radio og nve-radio-button const target = event.target.closest('sl-radio, sl-radio-button, nve-radio, nve-radio-button'); // @ts-ignore const radios = this.getAllRadios(); // @ts-ignore const oldValue = this.value; if (!target || target.disabled) { return; } // lagt til focus på klikk const controls = target.shadowRoot.querySelectorAll("span[part='base']"); if (controls.length > 0) { controls[0].focus(); } // @ts-ignore this.value = target.value; radios.forEach((radio: { checked: boolean }) => (radio.checked = radio === target)); // @ts-ignore if (this.value !== oldValue) { // @ts-ignore this.emit('sl-change'); // @ts-ignore this.emit('sl-input'); } }
syncRadioElements	= async function () { // @ts-ignore const radios = this.getAllRadios(); await Promise.all( // Sync the checked state and size // eslint-disable-next-line @typescript-eslint/no-explicit-any radios.map(async (radio: { updateComplete: any; checked: boolean; value: any; size: any }) => { await radio.updateComplete; // @ts-ignore radio.checked = radio.value === this.value; // @ts-ignore radio.size = this.size; }) ); // lagt til nve-radio-button // @ts-ignore this.hasButtonGroup = radios.some( // @ts-ignore (radio) => radio.tagName.toLowerCase() === 'sl-radio-button' || radio.tagName.toLowerCase() === 'nve-radio-button' ); // eslint-disable-next-line @typescript-eslint/no-explicit-any if (!radios.some((radio: { checked: any }) => radio.checked)) { // @ts-ignore if (this.hasButtonGroup) { const buttonRadio = radios[0].shadowRoot?.querySelector('button'); if (buttonRadio) { buttonRadio.tabIndex = 0; } } else { radios[0].tabIndex = 0; } } // @ts-ignore if (this.hasButtonGroup) { // lagt til nve-button-group const buttonGroup = // @ts-ignore this.shadowRoot?.querySelector('sl-button-group') || this.shadowRoot?.querySelector('nve-button-group'); if (buttonGroup) { buttonGroup.disableRole = true; } } }
syncRadios	= function () { if ( (customElements.get('sl-radio') && customElements.get('sl-radio-button')) || // lagt til nve-radio og nve-radio-button (customElements.get('nve-radio') && customElements.get('nve-radio-button')) ) { // @ts-ignore this.syncRadioElements(); return; } if (customElements.get('sl-radio') || customElements.get('nve-radio')) { // @ts-ignore this.syncRadioElements(); } else { // @ts-ignore customElements.whenDefined('sl-radio').then(() => this.syncRadios()); } // lagt til nve-radio-button if (customElements.get('sl-radio-button') || customElements.get('nve-radio-button')) { // @ts-ignore this.syncRadioElements(); } else { // Rerun this handler when <sl-radio> or <sl-radio-button> is registered // @ts-ignore customElements.whenDefined('sl-radio-button').then(() => this.syncRadios()); // lagt til nve-radio-button // @ts-ignore customElements.whenDefined('nve-radio-button').then(() => this.syncRadios()); } }
formControlController	= new FormControlController(this)	SlRadioGroup
defaultSlot	HTMLSlotElement	SlRadioGroup
validationInput	HTMLInputElement	SlRadioGroup
defaultValue	string = ''	SlRadioGroup
label	string = ''	SlRadioGroup	The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.
helpText	string = ''	SlRadioGroup	The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.
name	string = 'option'	SlRadioGroup	The name of the radio group, submitted as a name/value pair with form data.
value	string = ''	SlRadioGroup	The current value of the radio group, submitted as a name/value pair with form data.
size	'small' | 'medium' | 'large' = 'medium'	SlRadioGroup	The radio group's size. This size will be applied to all child radios and radio buttons.
form	string = ''	SlRadioGroup	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
required	boolean = false	SlRadioGroup	Ensures a child radio is checked before allowing the containing form to submit.
validity		SlRadioGroup	Gets the validity state object
validationMessage		SlRadioGroup	Gets the validation message

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handlePropChange	oldValue: any newValue: any	boolean
handleSizeChange			SlRadioGroup
handleValueChange			SlRadioGroup
checkValidity			SlRadioGroup	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
getForm		HTMLFormElement | null	SlRadioGroup	Gets the associated form, if one exists.
reportValidity		boolean	SlRadioGroup	Checks for validity and shows the browser's validation message if the control is invalid.
setCustomValidity	message:		SlRadioGroup	Sets a custom validation message. Pass an empty string to restore validity.
focus	options: FocusOptions		SlRadioGroup	Sets focus on the radio-group.

Deler

Navn	Beskrivelse
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The input's wrapper.
form-control-help-text	The help text's wrapper.
button-group	The button group that wraps radio buttons.
button-group__base	The button group's `base` part.