Intro
Radio viser brukeren en liste med alternativer som kan velges, og kun ett alternativ kan velges av gangen. Når et valgt er tatt kan det ikke fjernes, kun byttes med et annet alternativ.
Egnet til:
- Å velge ett alternativ
Uegnet til:
- Navigasjon
- Å velge flere alternativ
- Flere enn 7 alternativer
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 lettere for brukeren å skjønne hva komponenten skal brukes til, men den kan skjules i tilfeller der det er nødvendig.
Skjule label visuelt
Radio skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt, f.eks. i tabeller der en radio får ledeteksten sin fra tabellheaderen--bruk da `aria-label` eller `aria-labelledby`.
Read-only
Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere tekst fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.
Retningslinjer
Antall alternativer
Radio funker godt når det er 7 eller færre alternativer. Om det er flere alternativer vil listen bli lang og mengden kan overvelde brukeren. Da anbefales heller Select eller Combobox.
Orientering som liste
Alternativene skal stilles opp under hverandre i en liste for å gjøre det enkelt å scanne listen. De skal ikke plasseres ved siden av hverandre (horisontalt). Det gjør det vanskelig å lese. Det er også veldig problematisk for brukere som må forstørre websiden for å se godt nok (zoom).
Tilgjengelighet
Tastaturinteraksjon
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
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>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- 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
- nativeReadOnly? boolean
- 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
- readOnly? boolean
- Read only-state
- className? string
- ref? Ref<HTMLFieldSetElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- RadioGroup extends HTMLFieldSetElement
Tokens
| Token | Fallback |
|---|---|
| --ac-radio-checkbox-bg | --a-surface-default |
| --ac-radio-checkbox-border | --a-border-default |
| --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 |
