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 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
(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
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
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: unknown newValue: unknown	void
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.