Intro
Radioknapper brukes for et enkelt valg, ikke for flere valg. Bare et alternativ kan velges om gangen. Når en bruker velger et nytt valg, fjernes det forrige valget automatisk.
Egnet til:
- Enkelt valg
- Select
- Skjemaelement
Når bør man vurdere noe annet:
- Velge flere valg, bruk da eks Checkbox/Checkboxgruppe
- Navigasjon
- Filter
aksel.nav.no
aksel.nav.no
Anatomi
- 1. Label
Tittel som beskriver hva komponenten er i din kontekst. Beskrivelse av delen.
- 2. Beskrivelse til radiogruppe
Kort forklaringstekst.
- 3. radioknapp
Klikkeflate til radio.
- 4. Beskrivelse til enkelt valg
Kort forklaringstekst.
- 5. Feilmeldinger
Kort tekst når det skjer feil.
Varianter
Størrelser
Komponenten kommer i to størrelser. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Med eller uten label
En radiogruppe funker alltid med label. Vær oppmerksom på at label gjør det letter for brukeren å skjønne hva komponenten skal brukes til.
Disabled
Vi abefaler ikke å bruke disabled radioknapper i skjema.
Tilgjengelighet
Interaksjon Tastatur
Bruker roving tabindex for å håndtere fokusbevegelse mellom knappene.
| Kommando | Beskrivelse |
|---|---|
| Tab | Flytter fokus til den valgte radioknapp |
| ShiftTab | Flytter fokus til element før radiogruppe i tabindex |
| Space | Velger en radioknapp |
| Home | Flytter fokus til første knapp i gruppa. |
| End | Flytter fokus til siste knapp i gruppa. |
Bruk
Når brukes radiogruppe?
Vi bruker radiogruppe når vi vil at brukeren skal kunne velge et valg av flere forhåndsbestemte alternativer.
Vurder antall radioknapper i en radiogruppe
Det må alltid være minst to alternativer i en radioruppe. Dersom du har mer enn fem alternativer, kan du vurdere om det er mer hensiktsmessig å benytte en select komponent.
Disabled radioknapp
Selv om vi fraråder bruk av deaktiverte komponenter på generelt grunnlag kan disabled state ha legitime kontekstformål. Kontrast for ikke-tekstlig innhold .