Props

Prop:

label

Type:

string

Beskrivelse:

Ledetekst for gruppen. Blir til legend i fieldset

Prop:

helptext?

Type:

string

Beskrivelse:

Hjelpetekst over alternativene

Prop:

helptextDropdown?

Type:

string

Beskrivelse:

Hjelpetekst som vises når brukeren åpner «Les mer»

Prop:

helptextDropdownButton?

Status:

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

Type:

string

Beskrivelse:

Tekst på «Les mer»-knappen

Prop:

id?

Type:

string

Beskrivelse:

ID for gruppen. Brukes også som navn på alternativene når name mangler

Prop:

name?

Type:

string

Beskrivelse:

Gis til alternativer som ikke har eget name. Uten name brukes id, og uten den et generert navn

Prop:

value?

Type:

string[]

Beskrivelse:

Verdiene til avkryssede alternativer i DOM-rekkefølge, som FormData.getAll(name). Deaktiverte alternativer er ikke med. Elements tar også imot kommaseparerte verdier i attributtet. Å sette verdien fra kode fyrer ingen events. Gruppeelementet er skjemafeltet, så value, name og focus() finnes også på elementet (Elements) og på ref (React)

Prop:

defaultValue?

Type:

string[]

Beskrivelse:

Verdiene som er krysset av fra start i en ukontrollert gruppe. Skjema-reset går tilbake hit

Prop:

layout?

Type:

"vertical" | "horizontal"

Standardverdi:

"vertical"

Beskrivelse:

Retning for alternativene. Avstanden mellom dem følger størrelsen (16, 12 og 8px)

Prop:

inputSize?

input-size?

Type:

"xsmall" | "small" | "medium"

Standardverdi:

"medium"

Beskrivelse:

Størrelse på gruppen. Alternativene arver den, med mindre de har egen størrelse

Prop:

hasTile?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser alle alternativene som tile. Et alternativ kan slå på tile selv, men ikke slå det av når gruppen har slått det på

Prop:

required?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Minst ett alternativ må krysses av. Alternativene får customError med meldingen «Velg minst ett alternativ» til ett er krysset av. Sendes ikke videre som required til alternativene

Prop:

disabled?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Deaktiverer alle alternativene, som <fieldset disabled>. Kan ikke overstyres på et enkelt alternativ

Prop:

hasError?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser feiltilstand på gruppen og alle alternativene

Prop:

errorMessage?

Type:

string

Beskrivelse:

Vises under alternativene når hasError er satt

Prop:

useWrapper?

Type:

boolean

Standardverdi:

true

Beskrivelse:

Skjuler ledetekst og hjelpetekst visuelt når den er av. Gruppen beholder navnet sitt for skjermlesere

Prop:

requiredTag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at gruppen er påkrevd

Prop:

requiredText?

Status:

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

Type:

string

Beskrivelse:

Tekst som vises i påkrevd-merkingen

Prop:

optionalTag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at gruppen er valgfri

Prop:

optionalText?

Status:

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

Type:

string

Beskrivelse:

Tekst som vises i valgfritt-merkingen

Prop:

tagText?

Type:

string

Beskrivelse:

Tekst som vises i en tag ved siden av ledeteksten

Slots

Slot:

default

Beskrivelse:

PktCheckbox / pkt-checkbox, også som switch (isSwitch)

Slot:

helptext

Beskrivelse:

Hjelpetekst med markup (Elements)

Events

Event:

change

Type:

Event

Beskrivelse:

Fyres av gruppen når brukeren krysser av eller fjerner et kryss. Skjemafeltet er gruppen: event.target er gruppen, med name og value (gruppens verdi, verdiene til avkryssede checkboxer (string[])). Alternativenes egne events stopper ved gruppen

Event:

input

Type:

InputEvent

Beskrivelse:

Fyres av gruppen rett før change, med verdien allerede oppdatert

Event:

value-change

Type:

CustomEvent

Beskrivelse:

Gruppens nye verdi i detail

Event:

focus

Type:

FocusEvent

Beskrivelse:

Når fokus kommer inn i gruppen. Fyres ikke når fokus flytter seg mellom alternativene

Event:

blur

Type:

FocusEvent

Beskrivelse:

Når fokus forlater gruppen. Fyres ikke når fokus flytter seg mellom alternativene

Event:

onChange

Type:

Event

Beskrivelse:

Kalles når brukeren krysser av eller fjerner et kryss. Skjemafeltet er gruppen: event.target er gruppen, med name og value (gruppens verdi, verdiene til avkryssede checkboxer (string[])). Fungerer med register og Controller i React Hook Form

Event:

onValueChange

Type:

string[]

Beskrivelse:

Kalles med gruppens nye verdi når brukeren krysser av eller fjerner et kryss

Event:

onFocus

Type:

FocusEvent

Beskrivelse:

Når fokus kommer inn i gruppen, ikke mellom alternativene

Event:

onBlur

Type:

FocusEvent

Beskrivelse:

Når fokus forlater gruppen, ikke mellom alternativene

Props

Prop:

label?

Type:

string

Beskrivelse:

Tekst (label)

Prop:

checkHelptext?

Type:

string

Beskrivelse:

Hjelpetekst som vises under labelen, for eksempel for å forklare feltet nærmere

Prop:

name?

Type:

string

Beskrivelse:

Arves fra PktCheckboxGroup når det ikke er satt

Prop:

form?

Type:

string

Beskrivelse:

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

Prop:

value?

Type:

string

Beskrivelse:

Verdi

Prop:

id

Type:

string

Beskrivelse:

ID

Prop:

defaultChecked?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Forhåndsvalgt

Prop:

checked?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Huket av

Prop:

indeterminate?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Setter checkboxen i en ubestemt tilstand, ofte brukt for 'select all' checkboxer der noen men ikke alle elementer er valgt

Prop:

hasTile?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Boks (tile)

Prop:

inputSize?

input-size?

Type:

"xsmall" | "small" | "medium"

Beskrivelse:

Størrelse på tekst, hjelpetekst og tile. Uten verdi arves størrelsen fra input-wrapperen rundt

Prop:

disabled?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Deaktivert

Prop:

hasError?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Feil

Prop:

isSwitch?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Switch

Prop:

labelPosition?

Type:

"right" | "left"

Standardverdi:

"right"

Beskrivelse:

Posisjon

Prop:

hideLabel?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Skjul tekst/label

Prop:

requiredTag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at feltet er påkrevd

Prop:

requiredText?

Status:

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

Type:

string

Beskrivelse:

Tekst som vises i påkrevd-merkingen

Prop:

optionalTag?

Type:

boolean

Standardverdi:

false

Beskrivelse:

Viser en merking som indikerer at feltet er valgfritt

Prop:

optionalText?

Status:

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

Type:

string

Beskrivelse:

Tekst som vises i valgfritt-merkingen

Prop:

tagText?

Type:

string

Beskrivelse:

Tekst som vises i en tag ved siden av label

Events

Event:

change

Type:

—

Beskrivelse:

Returnerer checkboxens verdi når den endres