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

<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>

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.

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

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	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
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
updated	changedProperties: PropertyValues<this>	void
handlePropChange	oldValue: any newValue: any	boolean
makeInvalid
resetValidation
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.

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.