Designsystem - Select-block

Navn	Type	Verdi
label	string
description	string
data-size	sm, md, lg
required	boolean
readonly	boolean
width	full, auto	/>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt	Tillatte verdier	Default	Beskrivelse
guid	string	""	Unik identifikator for select-elementet
inputName	string	""	Navn-attributt for select-elementet
label	string	""	Tekst for label
description	string	""	Tekst under label
errorMessage	string	""	Feilmelding som vises ved ugyldig input
options	Array	[]	Liste over valg (option-objekter)
required	boolean	false	Om feltet er obligatorisk
readonly	boolean	false	Om feltet ikke er redigerbart
data-size	sm, md, lg	""	Bytter størrelsen på elementet og elementer under
data-width	full, auto	""	Setter full bredde eller størrelsen til innholdet

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot-navn	Beskrivelse
(default)	Elementer uten `slot`-attributt blir plassert etter `<select>` (kun shell)
label	Ekstra innhold i label
description	Plasseres under label elementet
~~sub-label~~	Bruk description Plasseres under label, over select
error-message	Ekstra innhold i feilmelding

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode	Parameter	Retur	Beskrivelse
validate	()	valid:boolean	Validerer feltet og returnerer gyldighet
getValidity	()	valid:boolean	Returnerer nåværende gyldighetsstatus
getValue	()	value:string	Returnerer nåværende valgt verdi

Eventer

Ref. Stenciljs.com

Event	Parameter	Beskrivelse
selectValueChange	(event)	Utløses når valgt verdi endres

Eksempler

Kontakt oss hvis du får denne feilen.

<lk-select-block
  guid="advanced-select"
  inputName="advanced"
  label="Standard label"
  description="Standard beskrivelse"
  errorMessage="Standard feilmelding"
  required="true"
  options='[{"value":"x","label":"X"},{"value":"y","label":"Y"}]'>
  <span slot="error-message">Kontakt oss hvis du får denne feilen.</span>
</lk-select-block>