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

ToggleGroup

Oppdatert 18. august 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    ToggleGroup lar brukeren ta valg som påvirker innholdet på siden. Komponenten består av en gruppe knapper som henger sammen og bare en knapp er kan være valgt om gangen.

    Egnet til:

    • Filtering av innhold
    • Veksling av datavisninger og innhold

    Uegnet til:

    • Erstatning for radio eller checkbox
    • Navigasjon

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Varianter

    Størrelser

    Komponenten kommer i to størrelser: medium og small. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.

    Action eller neutral

    Du kan bruke den blå (action) eller den grå (neutral) avhengig av kontekst. Neutral brukes til handlinger med lav prioritet.

    Med eller uten label

    Komponenten funker med og uten label. Vær oppmerksom på at label gjør det letter for brukeren å skjønne hva toggle group skal brukes til. Om du ikke bruker label bør knappeinnholdet beskrive valgene godt.

    Knappeinnhold

    En toggle har 3 innholdsvarianter:

    • Text – kun tekst
    • Text + icon – tekst med ikon på venstre side
    • Icon – kun ikon
    Informasjon

    Om knappeinnholdet kun er ikoner er det stor fare for at brukerne ikke forstår valgene. Dette alternativet bør brukes i tjenester for ekspertbrukere eller i situasjoner hvor det er en global forståelse av hva ikonet betyr. På eksterne flater bør det ikke brukes kun ikon.

    Retningslinjer

    Plassering

    Det må være plass til hele komponenten på skjermen, slik at alle valg er godt synlig for bruker. Om det ikke er plass (på mobil eller i andre grensesnitt med liten plass) kan toggle button group byttes ut med en select.

    UnngåToggle button med tekst over 2 linjer
    Ikke klem sammen komponenten slik at teksten går over 2 linjer.
    UnngåToggle button group som strekker seg utenfor skjermen.
    Sørg for at det er stor nok plass i UI slik at hele komponenten er synlig.

    NyheterRelevante lenker

    • Select

    Antall valg

    Antall valg i en toggle button group bør begrenses til 2 - 5 stk. Om du har flere valg bør du bruke en select.

    UnngåToggle button group med ett valg.
    Komponenten må ha minimum 2 valg.
    UnngåToggle button group med for mange valg.
    Komponenten bør ikke ha mer enn 4 - 5 valg, om det er plass i UI.

    Forklare handling

    Det er god praksis å legge på en tooltip som forklarer handlingen til en toggle button. Ekstra viktig om du kun bruker ikoner som knappeinnhold.

    GjørEn toggle button med tooltip som forklarer handlingen.
    Bruk en tooltip for å beskrive hva valget gjør.

    Egnet til filtrering

    Toggle button group egner seg til filtrering. Begrepet filtrering kan tolkes bredt. Et vanlig scenario er filtrering av lister og tabeller.

    GjørToggle button group brukt til filtrering
    Komponenten filtrerer dataene som vises i tabellen.

    Egnet til innholdsveksling

    Komponenten egner seg også godt til å veksle mellom datavisninger og innhold på en side. For eksempel kan den brukes til å veksle mellom datavisning med "tabell" og "graf". Eller å vise en løsning som "saksbehandler" eller "bruker".

    GjørToggle button group som veksler mellom graf og tabell.
    Komponenten veksler om dataene skal vises som graf eller tabell.

    Egnet til skjemafilter

    Denne komponenten egner seg til filtrering av skjemalementer. Eksempelvis om forskjellige skjemaelementer vises avhengig av hvilket valg du tar.

    GjørToggle button group brukt som skjemafilter.
    Komponenten styrer hvordan noen av feltene i et skjema vises.

    Uegnet som skjemaelement

    Denne komponenten egner seg ikke som et skjemaelement. Det anbefales å heller bruke radio group.

    UnngåToggle button group brukt som skjemaelement, som er feil.
    Toggle button group passer ikke som skjemaelement.
    GjørRadio group brukt i skjema
    Radio group er riktig å bruke som skjemaelement.

    Uegnet til navigasjon

    Denne komponenten egner seg ikke til navigasjon. Om det gjelder panelnavigasjon er det bedre å bruke tabs.

    UnngåToggle group brukt som navigasjon
    Toggle group passer ikke til navigasjon mellom paneler.
    GjørTab bruk til panelnavigasjon
    Tab er designet til å brukes til panelnavigasjon.

    Tekniske retningslinjer

    Innholdet som styres bør helst befinne seg umiddelbart etter Togglegroup i DOMen. Hvis ikke, bør du bruke aria-controls på Togglegroup for å henvise til IDen til containeren til innholdet som endrer seg. Ev. flytte fokus til containeren etter at brukeren velger Togglegroup-knappen.

    Tilgjengelighet

    Tastaturinteraksjon

    Toggle group bruker standard focus state (ramme).
    Vi bruker roving tabindex for å håndtere fokusbevegelse mellom toggle buttons.

    KommandoInteraksjon
    TabFlytter fokus til aktiv toggle button
    Shift+TabFlytter fokus til element før ToggleGroup i tabindex
    SpaceVelger en knapp.
    EnterVelger en knapp.
    ArrowDownFlytter fokus til neste knapp i gruppa.
    ArrowRightFlytter fokus til neste knapp i gruppa.
    ArrowUpFlytter fokus til forrige knapp i gruppa.
    ArrowLeftFlytter fokus til forrige knapp i gruppa.
    HomeFlytter fokus til første knapp i gruppa.
    EndFlytter fokus til siste knapp i gruppa.

    Props

    ToggleGroup

    children ReactNode
    Toggles.Item elements
    size?"medium" | "small"
    Changes padding and font-size
    value? string
    Controlled selected value
    defaultValue? string
    If not controlled, a default-value needs to be set
    onChange (value: string) => void
    Callback for selected toggle
    label? ReactNode
    Label describing ToggleGroup
    variant?"action" | "neutral"
    Changes design and interaction-visuals
    className? string
    ref? Ref<HTMLDivElement>
    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
    ToggleGroup extends HTMLDivElement

    ToggleGroup.Item

    children ReactNode
    Content
    value string
    Value for state-handling
    className? string
    ref? Ref<HTMLButtonElement>
    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
    ToggleGroup.Item extends HTMLButtonElement

    Tokens

    TokenFallback
    --ac-toggle-group-bg--a-surface-transparent
    --ac-toggle-group-border--a-border-default
    --ac-toggle-group-button-bg--a-surface-transparent
    --ac-toggle-group-button-text--a-text-default
    --ac-toggle-group-button-hover-bg--a-surface-action-subtle
    --ac-toggle-group-button-hover-text--a-text-default
    --ac-toggle-group-selected-bg--a-surface-action-selected
    --ac-toggle-group-selected-text--a-text-on-action
    --ac-toggle-group-button-neutral-bg--a-surface-transparent
    --ac-toggle-group-button-neutral-text--a-text-default
    --ac-toggle-group-button-neutral-hover-bg--a-surface-neutral-subtle-hover
    --ac-toggle-group-button-neutral-hover-text--a-text-default
    --ac-toggle-group-neutral-selected-bg--a-surface-neutral-selected
    --ac-toggle-group-neutral-selected-text--a-text-on-neutral

    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