Delar av dette innhaldet er ikkje tilgjengeleg på nynorsk enno.
- Accordion
- Alert
- Breadcrumbs
- Button
- Card
- Checkbox
- CheckboxGroup
- Chips
- DatePicker
- DescriptionList
- Divider
- ErrorMessage
- ErrorSummary
- Fieldset
- FileUploader
- Footer
- Icon
- IconButton
- InlineButton
- Link
- LinkGroup
- MegaButton
- Modal
- NavigationTile
- OpenClose
- Pagination
- Panel
- Popover
- RadioGroup
- RolePicker
- ScrollToTopButton
- SearchField
- Select
- Spinner
- StepList
- Table
- Tabs
- Tag
- TextArea
- TextField
- TopBannerExternal
- TopBannerInternal
- Typografi
- Versjonshistorikk
- WordInfo
RadioGroup
Pakke: ds-forms
RadioGroup (radioknapper) lar brukeren velge kun ett alternativ blant få valg.
Eksempel
Egnet til:
- å velge kun ett svaralternativ blant 2–7 valg.
Uegnet til:
- tilfeller der brukeren kun har ett alternativ. Da skal du bruke Checkbox.
- å la brukeren velge flere alternativer. Bruk i stedet Checkbox Group.
- lister med flere enn 7 valg, da blir det fort uoversiktlig. Undersøk om du kan presentere valgene i mindre porsjoner.
Teknisk dokumentasjon
Se RadioGroup i Storybook for tekniske detaljer.
Varianter
RadioGroup kommer alltid med flere radioknapper i en gruppe, og kan enten være horisontal eller vertikal.
Vertikal
RadioGroup i vertikal liste. Her har vi mulighet til å legge til en beskrivelse av punktet. Bruk dempet svartfarge.
Horisontal
RadioGroup plassert horisontalt. Hvis valgene er korte og konsise, kan du ha dem ved siden av hverandre. I mobilvisning legger de seg i en vertikal liste. Horisontal visning har ikke beskrivende tekst.
Hvordan bruke komponenten
Forhåndsverdi (default)
Dersom vi har god innsikt som ligger til grunn for at de aller fleste brukerne gjør ett av valgene i radioknapper setter vi dette valget som standard. På denne måten blir det enklere å fylle ut og vi unngår feilmeldinger om at ett av alternativene må velges. En risiko som medføger forhåndsutfylte valg, er at brukeren ikke tar stilling til valget som er gjort. Dette må vurderes i hvert tilfelle.
Slik: Et godt eksempel på når forhåndsutfylte verdier fungerer, er når valget i et felt påvirker neste steg. I dette tilfellet er det ingen risiko for at brukeren overser «ja», fordi de må fylle ut et nytt felt før de kan gå videre eller velge «nei».
Tekst i komponenten
- Hvis en eller flere av radioknappene trenger en beskrivelse, skal den ligge rett under svaralternativet.
- Svaralternativene skal være så korte som mulig.
- Hvert alternativ bør ha samme språklige form. For eksempel samme tid (presens), samme ordklasse (substantiv, verb osv.), og samme setningsoppbygning.
Universell utforming
- Spørsmålet/ledeteksten til radioknappene ligger i legend-elementet. Dette vises visuelt som standard, men kan ved behov skjules visuelt. Det er allikevel viktig for alle brukere å forstå hva som skal besvares, selv om legend-elementet er skjult.
- Husk at feilmeldinger skal referere til spørsmålet/ledeteksten, f.eks. «Type virksomhet må fylles ut».
- RadioGroup skal alltid ha underelementer (children), selv om det teknisk sett er mulig å la den være tom.