Combobox

Props

Prop:

name?

Type:

string

Beskrivelse:

Navn som brukes i skjema ved innsending

Prop:

form?

Type:

string

Beskrivelse:

ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet

Prop:

id?

Type:

string

Beskrivelse:

Unik ID for feltet

Prop:

ariaDescribedby?

aria-describedby?

Type:

string

Beskrivelse:

Spesifiserer ID-en til elementet som beskriver feltet.

Prop:

label?

Type:

string

Beskrivelse:

Tekst som vises over feltet

Prop:

placeholder?

Type:

string

Beskrivelse:

Spesifiserer en kort hint som beskriver forventet verdi av feltet.

Prop:

multiple?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Mulighet for å velge flere valg

Prop:

tagPlacement?

tag-placement?

Type:

"inside" | "outside"

Beskrivelse:

Plassering av valgte verdier i feltet ved flervalg

Prop:

maxlength?

Type:

number

Beskrivelse:

Maks antall valg dersom flervalg er aktivert

Prop:

typeahead?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Mulighet for automatisk utfylling av feltet fra listen over valg

Prop:

includeSearch?

include-search?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Mulighet for å søke etter valg inni dropdown

Prop:

allowUserInput?

allow-user-input?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Mulighet for å skrive inn egne verdier

Prop:

searchPlaceholder?

search-placeholder?

Type:

string

Beskrivelse:

Plassholdertekst for søkefeltet i dropdown

Prop:

displayValueAs?

display-value-as?

Type:

"label" | "value" | "prefixAndValue"

Standardverdi:

"label"

Beskrivelse:

Hvordan valgt verdi vises i feltet

Prop:

inputSize?

input-size?

Type:

"xsmall" | "small" | "medium"

Standardverdi:

"medium"

Beskrivelse:

Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.

Prop:

value?

Type:

string | string[]

Beskrivelse:

Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.

Prop:

helptext?

Type:

string

Beskrivelse:

Hjelpetekst som vises over feltet

Prop:

helptextDropdown?

helptextdropdown?

Type:

string

Beskrivelse:

Hjelpetekst som vises i en lukket boks man kan åpne

Prop:

helptextDropdownButton?

helptextdropdownbutton?

Type:

string

Standardverdi:

"Les mer"

Beskrivelse:

Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst

Prop:

disabled?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Feltet er deaktivert

Prop:

hasError?

haserror?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Feltet har en feil

Prop:

errorMessage?

errormessage?

Type:

string

Beskrivelse:

Tekst som vises under feltet ved feil

Prop:

required?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Feltet må fylles ut

Prop:

requiredTag?

requiredtag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at feltet er påkrevd

Prop:

requiredText?

requiredtext?

Status:

DeprecatedBruk strings={{ forms: { required: '…' } }} eller setPktStrings().

Type:

string

Beskrivelse:

Tekst som vises i påkrevd-merkingen

Prop:

optionalTag?

optionaltag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at feltet er valgfritt

Prop:

optionalText?

optionaltext?

Status:

DeprecatedBruk strings={{ forms: { optional: '…' } }} eller setPktStrings().

Type:

string

Beskrivelse:

Tekst som vises i valgfritt-merkingen

Prop:

tagText?

tagtext?

Type:

string

Beskrivelse:

Tekst som vises i en tag ved siden av label

Prop:

fullwidth?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Skal feltet ta opp hele bredden?

Prop:

defaultOptions?

default-options?

Type:

IPktComboboxOption[]

Standardverdi:

[]

Beskrivelse:

Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)

Prop:

options?

Type:

IPktComboboxOption[]

Standardverdi:

[]

Beskrivelse:

Liste over valg som kan velges, om options sendes inn som array med objekter

Prop:

inline?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Angir om feltet skal flyte med teksten

Prop:

useWrapper?

usewrapper?

Type:

boolean

Standardverdi:

true

Beskrivelse:

Indikerer om skjemaelementet skal bruke en wrapper

Prop:

hasFieldset?

hasfieldset?

Type:

boolean

Beskrivelse:

Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.

Prop:

counter?

Type:

boolean

Beskrivelse:

Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.

Prop:

defaultValue?

defaultvalue?

Type:

string | string[]

Beskrivelse:

Verdien feltet får ved oppstart og ved nullstilling av skjemaet

Events

Event:

change

Type:

Event

Beskrivelse:

Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.

Event:

value-change

Type:

CustomEvent

Beskrivelse:

Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en string[].

Event:

search

Type:

CustomEvent

Beskrivelse:

Returnerer søketeksten som streng i event.detail når brukeren skriver i søkefeltet

Event:

toggleHelpText

Type:

CustomEvent

Beskrivelse:

Returnerer event.detail { isOpen: true } eller event.detail { isOpen: false } når hjelpeteksten åpnes eller lukkes

Prop:

value

Type:

string

Beskrivelse:

Verdi som sendes ved valg

Prop:

label?

Type:

string

Beskrivelse:

Tekst som vises for valget

Prop:

prefix?

Type:

string

Beskrivelse:

Tekst som vises før valget

Prop:

description?

Type:

string

Beskrivelse:

Beskrivelse av valget

Prop:

disabled?

Type:

boolean

Beskrivelse:

Valget er deaktivert

Prop:

selected?

Type:

boolean

Beskrivelse:

Valget er valgt

Prop:

tagSkinColor?

Type:

"blue" | "blue-dark" | "blue-light" | "green" | "red" | "yellow" | "beige" | "gray" | "grey"

Beskrivelse:

Farge på tag