Jøkul RadioButtonGroup

Jøkul · Komponenter

Pakke: @fremtind/jokul

Denne docs-siden dekker både `RadioButtonGroup` og `RadioButton`, fordi de nesten alltid brukes sammen. Gruppen eier legend, validering og felles navn, mens hvert enkelt alternativ eier etikett og egen verdi.

Den lokale forhåndsvisningen følger Jøkul sin faktiske DOM-kontrakt med `fieldset`, `legend`, `jkl-radio-button` og underliggende `<input type="radio">`.

Playgrounden lar deg styre valgt verdi, inline-oppsett, ugyldig tilstand og et deaktivert alternativ direkte.

Eksempel

Props

Valgt verdi

Inline

Invalid

Disabled valg

value="email" · inline=false · invalid=false · disabled=false

Hvordan vil du ha kvitteringen?

På e-post

På SMS

I posten

Kode

React · tsx

import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/input-group/input-group.min.css";
import "@fremtind/jokul/styles/components/radio-button/radio-button.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import { RadioButton, RadioButtonGroup } from "@fremtind/jokul/radio-button";

export function Example() {
    return (
        <RadioButtonGroup
            legend="Hvordan vil du ha kvitteringen?"
            name="receipt-delivery"
            value="email"
        >
            <RadioButton value="email">På e-post</RadioButton>
            <RadioButton value="sms">På SMS</RadioButton>
            <RadioButton value="post">I posten</RadioButton>
        </RadioButtonGroup>
    );
}

Hendelser

Ingen hendelser fra radio button-eksempelet ennå.

Props

Disse prop-tabellene gjelder rotelementet RadioButtonGroup.

Jøkul-props

Jøkul-props på RadioButtonGroup som styrer layout og valgt tilstand i gruppen.

Prop	Type	Standard	Beskrivelse
value	string	ingen valgt verdi	Kontrollerer hvilken RadioButton som er valgt i gruppen.
inline	boolean	false	Legger radio buttons på én linje når alternativene er korte nok til å fungere side om side.

React-props

React-props som navngir gruppen og kobler til hjelp eller feiltekst.

Prop	Type	Standard	Beskrivelse
data-testautoid	string	ingen	Stabil test-id fra Jøkul sin feltgruppekontrakt når gruppen må spores uten å lene seg på legend-teksten.
legend	string	påkrevd	Spørsmålet eller overskriften som navngir hele radiogruppen.
labelProps	Omit<LabelProps, "children">	ingen	Lar deg justere label-varianten eller skjule legend visuelt uten å miste semantikken.
supportLabelProps	Omit<SupportLabelProps, "id" \| "errorLabel" \| "helpLabel">	ingen	Styrer hvordan hjelp- eller feilmeldingen for gruppen rendres, for eksempel labelType eller skjult tekst.
tooltip	ReactNode	ingen	Ekstra forklaring knyttet til legend når spørsmålet trenger mer kontekst uten å vokse i høyde.
className	string	ingen	Ekstra klasse på fieldset-wrapperen når gruppen må kobles til lokal layout eller sporing.
errorLabel	ReactNode	ingen	Feilmelding for hele gruppen. Setter samtidig gruppen og tilhørende RadioButtons i ugyldig tilstand.
helpLabel	string	ingen	Kort støttetekst under legend når brukeren trenger mer føring før valget tas.
description	string	ingen	Ekstra beskrivelse som utdyper gruppens formål når legend alene ikke er nok.

Native HTML-props

Native fieldset- og hendelsesrelaterte props som går på hele gruppen.

Prop	Type	Standard	Beskrivelse
name	string	ingen	Settes på gruppen for å gi alle RadioButtons samme skjema-navn.
onChange	(event) => void	ingen handler	Kalles når brukeren velger et nytt alternativ i gruppen.

ARIA-props

Tilgjengelighetsattributter som gjør gruppens validering tydelig for hjelpemidler.

Prop	Type	Standard	Beskrivelse
aria-invalid	boolean	false	Brukes på gruppen når valget er ugyldig og brukeren trenger en konkret feilmelding.

Delkomponenter

RadioButton

API: RadioButton · Selektor: .jkl-radio-button

Det enkelte alternativet i gruppen, med label, underliggende radio-input og eventuell lokal hjelpetekst.

React-props

Props på RadioButton som styrer etikett og lokal hjelpetekst på ett alternativ.

Prop	Type	Standard	Beskrivelse
children	ReactNode	påkrevd	Synlig etikett for det enkelte alternativet.
helpLabel	ReactNode	ingen	Ekstra tekst under et enkelt alternativ når ett valg trenger mer forklaring enn de andre.
label	ReactNode	deprecated	Utfaset alias for `children`. Behold bare ved migrering fra eldre kode.
supportLabelProps	Omit<SupportLabelProps, "id" \| "errorLabel" \| "helpLabel">	ingen	Lar deg justere hjelp- eller støtteteksten som hører til ett enkelt alternativ.

Native HTML-props

Native `input[type="radio"]`-attributter som settes per alternativ.

Prop	Type	Standard	Beskrivelse
value	string	påkrevd	Verdien alternativet representerer i gruppen.
name	string	arves vanligvis fra gruppen	Kan settes direkte på RadioButton når kontrollen eies av en ekstern formmotor eller må stå utenfor gruppens standardkobling.
disabled	boolean	false	Brukes når ett bestemt alternativ midlertidig ikke kan velges.
onChange	(event) => void	arves vanligvis fra gruppen	Kan settes per knapp, men håndteres ofte på RadioButtonGroup.

ARIA-props

ARIA-attributter for enkelttilfeller der ett alternativ trenger egen utdyping.

Prop	Type	Standard	Beskrivelse
aria-describedby	string	ingen	Pek til støttetekst når ett bestemt alternativ trenger ekstra forklaring.

Når du skal bruke RadioButtonGroup

Bruk radio buttons når brukeren må velge ett, og bare ett, alternativ fra en kjent gruppe.

Hvis brukeren kan velge flere alternativer samtidig, er checkboxer som regel riktigere. Hvis alternativene blir mange, er select ofte mer håndterlig.

Gi gruppen en tydelig legend som beskriver spørsmålet alternativene svarer på.
Sorter alternativene i en rekkefølge som støtter oppgaven, for eksempel mest sannsynlige valg først.
Bruk inline bare når etikettene er korte og ikke mister skannbarhet side om side.

Tilgjengelighet

Legend og label må til sammen gi nok kontekst til at skjermlesere kan forstå både spørsmålet og de enkelte svaralternativene.

Når gruppen er ugyldig, bør feilmeldingen peke på hele gruppen, ikke bare ett av alternativene.

La piltaster flytte valgt alternativ innen gruppen uten å bryte forventet tastaturnavigasjon.
Ikke bruk disabled alternativer uten forklaring når brukeren kan forvente at valget finnes.

Komponentprofil

Klient-JS: Ingen
Hydrering: Ingen
Ikoner: Påkrevd
Dekket API-props: 15
Playground-kontroller: 4
Delkomponenter: 1
Anatomideler: 0
Komposisjoner: 0
Utfasete props: 0

Stiler

@fremtind/jokul/styles/core/core.css
@fremtind/jokul/styles/components/input-group/input-group.min.css
@fremtind/jokul/styles/components/radio-button/radio-button.min.css
@fremtind/jokul/styles/fonts/webfonts.min.css

Ikonkontrakt

Bruk: Påkrevd

Fontimport: @fremtind/jokul/styles/fonts/webfonts.min.css

RadioButton bruker Material Symbols-ligaturer i labelens `:before` for å vise valgt og ikke-valgt tilstand.
Uten Jøkul sine webfonts vises ligaturteksten i stedet for radiosymbolene, selv om radio-button-stilen er lastet.

Propkontrakt

Dekning: Komplett

Scope: Pakkens offentlige props, uten generiske DOM-props

RadioButtonGroup · RadioButtonGroupProps · @fremtind/jokul/radio-button · 13 props
RadioButton · RadioButtonProps · @fremtind/jokul/radio-button · 7 props

Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

Tilgjengelighet

Tastatur: Følger tastaturmønsteret for radiogrupper; Tab flytter inn og ut av gruppen, og piltaster flytter valgt alternativ.

Semantikk som kreves

Bruk radio buttons når brukeren må velge nøyaktig ett alternativ i en gruppe.
Gi gruppen en tydelig legend som forklarer spørsmålet eller kriteriet brukeren velger ut fra.
Feilstatus må knyttes til hele gruppen, ikke bare til ett enkelt alternativ.

Automatiserte kontroller

Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

Manuelle kontroller

Bekreft at legend og alternativtekster kan forstås uten ekstra kontekst rundt skjemaet.
Bekreft at rekkefølgen på alternativene støtter oppgaven brukeren prøver å løse.

Ytelse

Grunnoppførselen er ren HTML og CSS i docs og krever ingen klienthydrering.
Hold gruppene korte; mange radio buttons blir fort tunge å skanne sammenlignet med select eller stegvis filtrering.

Relatert

Checkbox : Bruk checkbox når valgene ikke utelukker hverandre og brukeren kan krysse av flere samtidig.
Select : Bruk select når ett valg fortsatt skal tas, men listen er lang nok til at radio buttons blir tung å skanne.
Installer Jøkul : Hent inn core-, input-group- og radio-button-stilene før du bygger skjemaflater med Jøkul.