Komponenter
Checkbox
Checkbox gir brukerne mulighet til å velge ett eller flere alternativer. Den kan også brukes i tilfeller der brukeren skal bekrefte noe.
HTML
Unable to parse html
const Preview = () => { return ( <Checkbox label='Checkbox label' description='Description' value='value' /> ); }; render(<Preview />)
Bruk checkbox når
- brukerne skal kunne velge ett eller flere alternativer
- brukerne skal bekrefte eller avkrefte noe, for eksempel at innholdet er lest og forstått
Unngå checkbox når
- brukerne kun skal velge ett alternativ, bruk heller radio
- brukerne har mange alternativer å velge mellom, bruk heller select eller suggestion
- brukerne skal slå noe av eller på, bruk heller switch
Eksempel
Bekrefting med checkbox
Hvis brukerne skal bekrefte noe, men ikke velge noe, kan en checkbox stå alene. For eksempel når brukerne skal bekrefte at noe er riktig, eller samtykke til vilkår.
En checkbox for samtykke skal alltid kreve en aktiv handling, du skal aldri forhåndsvelge boksen. Dette sikrer at samtykket er gitt frivillig.
HTML
Unable to parse html
const OneOption = () => ( <Fieldset> <Fieldset.Legend>Bekreft at du er over 18 år</Fieldset.Legend> <Fieldset.Description> For at vi skal kunne sende deg opplysningen du ber om, må du bekrefte at du er myndig. </Fieldset.Description> <Checkbox label='Jeg bekrefter at jeg er over 18 år' value='samtykke' /> </Fieldset> ); render(<OneOption />)
Gruppering
De aller fleste ganger brukes checkbox i grupper, der brukerne kan velge flere alternativer.
HTML
Unable to parse html
const Group = () => { const { getCheckboxProps } = useCheckboxGroup({ value: ['epost'], }); return ( <Fieldset> <Fieldset.Legend> Hvordan vil du helst at vi skal kontakte deg? </Fieldset.Legend> <Fieldset.Description> Velg alle alternativene som er relevante for deg. </Fieldset.Description> <Checkbox label='E-post' {...getCheckboxProps('epost')} /> <Checkbox label='Telefon' {...getCheckboxProps('telefon')} /> <Checkbox label='SMS' {...getCheckboxProps('sms')} /> </Fieldset> ); }; render(<Group />)
Med feil
Når checkbox brukes i grupper, skal feilmeldingen vises samlet for hele gruppen.
HTML
Unable to parse html
const WithError = () => { const [error, setError] = useState(''); const { getCheckboxProps, validationMessageProps, value } = useCheckboxGroup({ value: ['epost'], error, }); useEffect(() => { if (value.length < 2) { setError('Du må velge minst to alternativ'); } else { setError(''); } }, [value]); return ( <Fieldset> <Fieldset.Legend> Hvordan vil du helst at vi skal kontakte deg? </Fieldset.Legend> <Fieldset.Description> Velg alle alternativene som er relevante for deg. </Fieldset.Description> <Checkbox label='E-post' {...getCheckboxProps('epost')} /> <Checkbox label='Telefon' {...getCheckboxProps('telefon')} /> <Checkbox label='SMS' {...getCheckboxProps('sms')} /> <ValidationMessage {...validationMessageProps} /> </Fieldset> ); }; render(<WithError />)
Outline
I noen tilfeller kan det være hensiktsmessig å fremheve valgene med en større klikkflate rundt checkboxen.
Dette kan for eksempel være når
- valget representerer et tydelig veivalg som bør skille seg ut i grensesnittet
- informasjon som hører sammen med valget (beskrivelser og eventuelle tilleggsdetaljer) skal oppleves som én samlet og sammenhengende interaksjon
- standard checkboxer ville gitt en visuelt svak layout
HTML
Unable to parse html
const Outline = () => { const { getCheckboxProps } = useCheckboxGroup({ value: ['drift'], variant: 'outline', }); return ( <Fieldset> <Fieldset.Legend>Hvilke varsler vil du motta?</Fieldset.Legend> <Fieldset.Description> Velg hvilke typer varsler som er relevante for deg. </Fieldset.Description> <Checkbox label='Driftsmeldinger' description='Varsler ved planlagt vedlikehold og driftsavvik.' {...getCheckboxProps('drift')} /> <Checkbox label='Påminnelser' description='Varsler om frister og oppgaver som krever handling.' {...getCheckboxProps('paminnelse')} /> </Fieldset> ); }; render(<Outline />)
Skrivebeskyttet Checkbox
Checkbox støtter readOnly-attributtet for å gjøre feltet skrivebeskyttet, og gir en visuell indikasjon som skiller seg fra redigerbare felter. Selv om de ikke kan redigeres, er felter med readOnly-attributtet med i tabrekkefølgen, og informasjon blir med når skjemaet sendes inn.
Vi unngår readOnly så langt det lar seg gjøre, fordi slike felter kan være forvirrende for noen brukere. Ikke alle vil forstå hvorfor de ikke får til å endre innholdet i feltet.
HTML
Unable to parse html
const ReadOnlyGroup = () => { const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({ value: ['epost'], readOnly: true, }); return ( <Fieldset> <Fieldset.Legend> Hvordan vil du helst at vi skal kontakte deg? </Fieldset.Legend> <Fieldset.Description> Velg alle alternativene som er relevante for deg. </Fieldset.Description> <Checkbox label='E-post' {...getCheckboxProps('epost')} /> <Checkbox label='Telefon' {...getCheckboxProps('telefon')} /> <Checkbox label='SMS' {...getCheckboxProps('sms')} /> <ValidationMessage {...validationMessageProps} /> </Fieldset> ); }; render(<ReadOnlyGroup />)
Disabled
Vi bør unngå at checkbox er deaktivert (disabled) fordi det kan være vanskelig å oppfatte. Noen brukere vil ikke forstå hva valget sier eller hvorfor det ikke er klikkbart.
Hvis en checkbox eller gruppe med checkbox ikke er relevant, bør du helst fjerne valgene fremfor å deaktivere dem. Tilby gjerne brukerne informasjon om hvorfor valgene ikke er tilgjengelige.
Nav har en god forklaring på hvorfor deaktiverte tilstander er problematisk (nav.no) og hvilke alternativer som finnes.
HTML
Unable to parse html
const Disabled = () => { const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({ value: ['epost'], disabled: true, }); return ( <Fieldset> <Fieldset.Legend> Hvordan vil du helst at vi skal kontakte deg? </Fieldset.Legend> <Fieldset.Description> Velg alle alternativene som er relevante for deg. </Fieldset.Description> <Checkbox label='E-post' {...getCheckboxProps('epost')} /> <Checkbox label='Telefon' {...getCheckboxProps('telefon')} /> <Checkbox label='SMS' {...getCheckboxProps('sms')} /> <ValidationMessage {...validationMessageProps} /> </Fieldset> ); }; render(<Disabled />)
Retningslinjer
Bruk checkbox når brukerne kan velge ett eller flere alternativer.
Sorter alternativene
Sorter svaralternativene alfabetisk hvis det ikke er en god grunn til å gjøre noe annet. Vær forsiktig med å la det mest brukte svaralternativet stå først hvis det er et personlig spørsmål eller et verdispørsmål, som for eksempel legning eller partitilhørighet.
Plassering
Plasser helst svaralternativene vertikalt. Da blir det lettere å skanne listen og lese alternativene. For brukere som må forstørre teksten, er horisontale lister utfordrende.
Gjør slik
Unngå dette
Tekst
- Ledeteksten skal henge godt sammen med svaralternativene. Tenk på teksten som en samtale, og bruk du-form i ledeteksten og jeg-form i alternativene.
- Få frem at brukerne kan velge flere alternativer, og presiser det hvis de bare kan velge et begrenset antall alternativer.
- Svaralternativene skal alltid ha stor forbokstav.
Les mer om hvordan du skriver ledetekster, spørsmål og svaralternativer i skjema.
Rediger denne siden på github.com (åpnes i ny fane)