nve-radio-button

En sl-radio-button med NVE design. Merk at denne har ekstra hjørne-styling på første og siste knapp i gruppen. Man må derfor unngå å ha andre elementer blant nve-radio-button I motsetning til vanlig button så har denne støtte for "pill", men gjelder også da kun første og siste knapp

Arvet fra SlRadioButton.

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

 

Eksempler

Se også nve-radio-group

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

Bruk av slots for ikon

<nve-radio-group label="Vennligst velg en av disse">
  <nve-radio-button value="valg1">
    <nve-icon slot="prefix" name="close"></nve-icon>
    <div>Med ikon</div>
  </nve-radio-button>
  <nve-radio-button value="valg2">Kun tekst</nve-radio-button>
  <nve-radio-button value="valg3" disabled>
    <div>Disabled</div>
  </nve-radio-button>
  <nve-radio-button value="valg4">
    <nve-icon slot="suffix" name="alarm"></nve-icon>
    <div>Ikon bak</div>
  </nve-radio-button>
</nve-radio-group>

Ekstra avrundede hjørner. Merk at dette kun har effekt på første og siste knapp

<nve-radio-group>
  <nve-radio-button value="valg1" pill> Valg 1 </nve-radio-button>
  <nve-radio-button value="valg2" pill>Valg 2</nve-radio-button>
  <nve-radio-button value="valg3" pill> Valg 3 </nve-radio-button>
  <nve-radio-button value="valg4" pill> Valg 4 </nve-radio-button>
</nve-radio-group>

Ulike størrelser

Man setter størrelse på nve-radio-group, og denne setter igjen størrelse på nve-radio-button

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

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

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

Spor

Navn	Beskrivelse
(standard)	The radio button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar element.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-blur	SlRadioButton	Emitted when the button loses focus.
sl-focus	SlRadioButton	Emitted when the button gains focus.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string = ''
input	HTMLInputElement	SlRadioButton
hiddenInput	HTMLInputElement	SlRadioButton
hasFocus	boolean = false	SlRadioButton
value	string	SlRadioButton	The radio's value. When selected, the radio group will receive this value.
disabled	boolean = false	SlRadioButton	Disables the radio button.
size	'small' | 'medium' | 'large' = 'medium'	SlRadioButton	The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so this attribute can typically be omitted.
pill	boolean = false	SlRadioButton	Draws a pill-style radio button with rounded edges.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleDisabledChange			SlRadioButton
focus	options: FocusOptions		SlRadioButton	Sets focus on the radio button.
blur			SlRadioButton	Removes focus from the radio button.

Deler

Navn	Beskrivelse
base	The component's base wrapper.
button	The internal `<button>` element.
button--checked	The internal button element when the radio button is checked.
prefix	The container that wraps the prefix.
label	The container that wraps the radio button's label.
suffix	The container that wraps the suffix.