Intro
Vi bruker Radioknapper og Radio-gruppe når bruker bare skal velge et av flere svaralternativ. Om du har flere enn 7 svaralternativ, anbefaler vi å erstatte Radio-gruppe med Select-kompontenten.
Når brukere skal ha mulighet til å velge flere svaralternativ, er det bedre å bruke Checkbox-gruppe.
Egnet til å:
- Velge bare et svaralternativ
Vurder noe annet:
- Navigasjon
Eksempler
Varianter
Størrelser
Komponenten kommer i to størrelser.
- Medium (standard) brukes både på eksterne og interne flater.
- Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Synlig eller skjult legend
Legend gjør det letter for brukeren å skjønne hva komponenten skal brukes til, men den kan skjules i tilfeller der det er nødvendig.
Tilgjengelighet
Interaksjon Tastatur
Bruker roving tabindex for å håndtere fokusbevegelse mellom knappene.
| Kommando | Interaksjon |
| Tab | Flytter fokus til den valgte radioknapp |
| ShiftTab | Flytter fokus til element før radiogruppe i tabindex |
| Space | Velger en radioknapp |
| Pil opp/venstre | Flytter fokus til forrige valg |
| Pil ned/høyre | Flytter fokus til neste valg |
Disabled radioknapp
Selv om vi fraråder bruk av disabled state generelt, finnes det helt sikkert unntak. Ta kontakt med våre eksperter på universell utforming for å finne best mulig løsning.
Props
Radio
- children ReactNode
- value any
- description? string
- size? "medium" | "small"
- disabled? boolean
- id? string
- className? string
- ref? Ref<HTMLInputElement>
- Radio label
- The value of the HTML element
- Adds a description to extend labling of Radio
- Changes font-size, padding and gaps
- Disables element
@note Avoid using if possible for accessibility purposes
- Override internal id
- Radio extends HTMLInputElement
RadioGroup
- children ReactNode
- name? string
- defaultValue? any
- value? any
- onChange?((value: any) => void)
- required? boolean
- legend ReactNode
- hideLegend? boolean
- error? ReactNode
- errorId? string
- size? "medium" | "small"
- disabled? boolean
- description? ReactNode
- id? string
- className? string
- ref? Ref<HTMLFieldSetElement>
- Collection of <Radio />-elements
- Override internal name
- Default checked Radio
- Controlled state for Radio
- Returns current checked Radio in group
- Tells Fieldset if group is required
- Fieldset legend
- If enabled shows the legend and description for screenreaders only
- Error message for element
- Override internal errorId
- Changes font-size, padding and gaps
- Disables element
@note Avoid using if possible for accessibility purposes
- Adds a description to extend labling of a field
- Override internal id
- RadioGroup extends HTMLFieldSetElement