nve-checkbox

Lar brukeren toggle mellom to tilstander, valgt og ikke valgt. Sjekkbokser kan brukes alene eller i grupper.

Arvet fra LitElement

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

 

<nve-checkbox value="showDocs">Vis dokumenter</nve-checkbox>

nve-checkbox bygger på et native <input>-element med type checkbox og støtter derfor de fleste vanlige input-attributter som passer med checkbox:

• checked
• disabled
• value

Komponenten videresender relevante hendelser fra det interne input-elementet slik at de kan lyttes til utenfor komponentens Shadow DOM.

• change – sendes når valgt verdi endres.

Noen native attributter er bevisst ikke støttet:

• form og name – komponenten er ikke laget for native form submission.
• required – ikke støttet på enkelte sjekkbokser, den støttes kun i nve-checkbox-group
• switch – ny attributt som ikke er støttet i alle nettleserne enda. Vi har vår egen nve-switch komponent som vi anbefaler å bruke i stedet.

Retningslinjer

• Gi alltid feltet en tydelig label og value.
• Bruk indeterminate-propertyen bare for en overordnet sjekkboks (med flere sjekkbokser under), og kun når noen av barna er valgt.
• Bruk sjekkboks når valget skal få effekt med én gang. Hvis avhuking utløser en asynkron operasjon, ikke vent med å oppdatere checked til etter await – gi umiddelbar tilbakemelding og rull tilbake ved feil.

Eksempler

Checked

Bruk checked for å vise at boksen er valgt.

<nve-checkbox checked value="showDocs">Vis dokumenter</nve-checkbox>

Størrelse

Bruk size for å endre størrelsen på en sjekkboks. Verdien kan være:

• large
• medium (standard)
• small

<nve-checkbox size="small" value="showDocs">Vis dokumenter (small)</nve-checkbox>
<nve-checkbox value="showDocs">Vis dokumenter (medium)</nve-checkbox>
<nve-checkbox size="large" value="showDocs">Vis dokumenter (large)</nve-checkbox>

Deaktivert

Et deaktivert felt (disabled) kan ikke få fokus og blir derfor ofte ikke oppdaget av brukere som navigerer med tastatur eller skjermleser. Bruk disabled med omhu, og vurder å gi en tydelig forklaring i tekst på hvorfor feltet er deaktivert.

Bruk attributtet disabled for å hindre muligheten for å endre et verdi.

<nve-checkbox disabled value="showDocs">Vis dokumenter</nve-checkbox>

Indeterminate

Bruk indeterminate når en overordnet sjekkboks representerer en gruppe der bare noen av valgene er krysset av. Tilstanden betyr delvis valgt, ikke ja eller nei.

Når den overordnede sjekkboksen klikkes, skal den enten velge alle eller fjerne alle underliggende sjekkbokser.

<nve-checkbox indeterminate value="showDocs">Vis dokumenter</nve-checkbox>

Tilgjengelighet

Når en bruker tabber til sjekkboksen og trykker Space, toggles den valgte tilstanden.

Komponenten bruker et <label> -element som wraper både input og tekst, så både det visuelle feltet og teksten er klikkebare.

Indeterminate-tilstanden vises visuelt, men Screen readers vil normalt annonsere den som en valgbar tilstand.

required er bare tilgjengelig på nve-checkbox-group, ikke på individuelle sjekkbokser.

Hendelser

Navn	Arvet fra	Beskrivelse
change		Når sjekkboksen blir valgt eller fravalgt. Inneholder den valgte verdien.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
size	'small' | 'medium' | 'large' = 'medium'		Størrelse på sjekkboks
indeterminate	= false		Om sjekkboksen er i en indeterminert tilstand
disabled	= false		Om sjekkboksen er deaktivert
checked	= false		Om sjekkboksen er valgt
value	string = ''		Verdien til sjekkboksen. Når valgt, vil sjekkboksgruppen motta denne verdien.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
focus	options: FocusOptions			Gir fokus til sjekkboksen.

Deler

Navn	Beskrivelse
base	wrapper rundt sjekkboksen.