Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Radio

Oppdatert 7. juli 2023Stabil
GithubYarn FigmaEndringslogg

    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

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    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.

    KommandoInteraksjon
    Pil opp/venstreFlytter fokus til forrige valg
    Pil ned/høyreFlytter fokus til neste valg
    SpaceVelger radiovalg ved første fokus inn i gruppa, hvis gruppa ikke har et default valg
    TabFlytter 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

    TokenFallback
    --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
    Hva er dette?

    Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

    Relaterte komponenter

    • Select thumbnail
      Select

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack