Radio
@/components/ui/Radio
Radio (enkeltvalg) og RadioGroup (rovende tastaturnavigasjon) — for en LENGRE liste der hvert alternativ trenger en egen beskrivelse. Ikke for 2–4 valg (regel/velg-en-av-fa-ingen-radio).
Når brukes den
IKKE for «velg én av 2–4/5–6 synlige alternativer» — det er PillTabs eller Select sin jobb (regel/velg-en-av-fa-ingen-radio). Den regelen endres ikke av at Radio finnes.
Bruk Radio/RadioGroup KUN når hvert alternativ trenger en egen forklaringslinje under etiketten (abonnementsnivå, leveringsmetode) — noe verken PillTabs (ingen plass til beskrivelse) eller Select (skjuler valgene bak ett klikk, umulig å sammenligne side ved side) dekker.
Typisk 5+ alternativer i én kolonne (vertikal, standard) — bruk `orientation="horizontal"` kun for korte etiketter uten beskrivelse.
Tastatur: Pil opp/ned (eller venstre/høyre horisontalt) flytter OG velger — kun ett tastaturfokus-stopp inn i hele gruppen, som en native radio-gruppe.
Ikke bygg et rått input-element med type="radio" noe sted i appen (regel/ingen-raa-skjemaelementer).
Eksempler
Med beskrivelse per valg
Standardbruken — en lengre liste der hvert nivå trenger sin egen forklaring. Siste alternativ er deaktivert.
<RadioGroup
name="niva"
value={valgt}
onChange={setValgt}
options={[
{ value: 'grunn', label: 'Grunn', description: '…' },
{ value: 'standard', label: 'Standard', description: '…' },
]}
/>Horisontal, uten beskrivelse
Kort etikett, ingen beskrivelse — passer i en smal rad. Fortsatt 5+ reelle alternativer ville vært riktig her; 2–4 skal være PillTabs.
size="sm"
16px boks for tette rader — samme skala som Checkbox.
Props
Sveip tabellen for å se hele innholdet