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
Har du innspill til komponenten?
Send forslagEksempler
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 lettere for brukeren å skjønne hva komponenten skal brukes til, men den kan skjules i tilfeller der det er nødvendig.
Tilgjengelighet
Interaksjon Tastatur
Merk at man bruker piltastene for å ta radiovalg, ikke tab.
| Kommando | Interaksjon |
| Pil opp/venstre | Flytter fokus til forrige valg |
| Pil ned/høyre | Flytter fokus til neste valg |
| Space | Velger radiovalg ved første fokus inn i gruppa, hvis gruppa ikke har et default valg |
| Tab | Flytter fokus til/fra radiogruppa |
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
- Radio label
- value any
- The value of the HTML element
- description? string
- Adds a description to extend labling of Radio
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- id? string
- Override internal id
- className? string
- ref? Ref<HTMLInputElement>
- Radio extends HTMLInputElement
RadioGroup
- children ReactNode
- Collection of <Radio />-elements
- name? string
- Override internal name
- defaultValue? any
- Default checked Radio
- value? any
- Controlled state for Radio
- onChange?((value: any) => void)
- Returns current checked Radio in group
- required? boolean
- Tells Fieldset if group is required
- legend ReactNode
- Fieldset legend
- hideLegend? boolean
- If enabled shows the legend and description for screenreaders only
- error? ReactNode
- Error message for element
- errorId? string
- Override internal errorId
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- description? ReactNode
- Adds a description to extend labling of a field
- id? string
- Override internal id
- className? string
- ref? Ref<HTMLFieldSetElement>
- RadioGroup extends HTMLFieldSetElement
Tokens
| Token | Fallback |
| --ac-radio-checkbox-bg | --a-surface-default |
| --ac-radio-checkbox-border | --a-border-strong |
| --ac-radio-checkbox-action | --a-surface-action |
| --ac-radio-checkbox-action-hover-bg | --a-surface-action-subtle |
| --ac-radio-checkbox-error-border | --a-border-danger |
| --ac-radio-checkbox-error-hover-bg | --a-surface-danger-subtle |
