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
- Type:
ReactNode
- Description:
value
- Type:
any
- Description:
description?
- Type:
string
- Description:
size?
- Type:
"medium" | "small"
- Description:
disabled?
- Type:
boolean
- Description:
id?
- Type:
string
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLInputElement>
- Description:
RadioGroup
children
- Type:
ReactNode
- Description:
name?
- Type:
string
- Description:
defaultValue?
- Type:
any
- Description:
value?
- Type:
any
- Description:
onChange?
- Type:
((value: any) => void)
- Default:() => {}
- Description:
required?
- Type:
boolean
- Description:
legend
- Type:
ReactNode
- Description:
hideLegend?
- Type:
boolean
- Description:
nativeReadOnly?
- Type:
boolean
error?
- Type:
ReactNode
- Description:
errorId?
- Type:
string
- Description:
size?
- Type:
"medium" | "small"
- Description:
disabled?
- Type:
boolean
- Description:
description?
- Type:
ReactNode
- Description:
id?
- Type:
string
- Description:
readOnly?
- Type:
boolean
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLFieldSetElement>
- Description:
Tokens
Token | Fallback |
---|---|
--ac-radio-checkbox-bg | --a-surface-default |
--ac-radio-checkbox-border | --a-border-default |
--ac-radio-checkbox-action | --a-surface-action-selected |
--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 |