Komponenter

Tabs

Tabs brukes til å veksle mellom paneler på en side. Dette hjelper brukere med å navigere mellom relatert innhold uten å bytte side. Ett panel er alltid valgt.

StabilOppdatert 9. mai 2025

Github Figma Endringslogg

Egnet til:

Organisere relatert innhold på én enkelt side.

Uegnet til:

Filtrering og sortering.
Navigasjon mellom sider.

Eksempler

Retningslinjer

Tekstmengde

Teksten på en tab bør være kort og beskrive panelet den åpner. En tab med tekst over flere linjer er ikke brukervennlig.

Tabs med kort tekst — Kort tekst som beskriver hva du får se i panelet.

Tabs med for mye tekst — Unngå mye tekst. Tekst på flere linjer er ikke brukervennlig.

Antall tabs

Gjør en vurdering på antall tabs i løsningen din. For mange kan oppleves uoversiktlig for brukeren, og kan føre til horisontal skrolling på små skjermer. Det går også an å bytte ut tab-menyen med en select på små skjermer om det funker bedre.

Bare ikoner

Tabs med bare ikoner bør kun brukes i ekspertløsninger, siden ikoner er vanskelig å forstå for vanlige brukere. Beskriv i så fall tab-elementene med tooltip.

En tab med tooltip — Tooltip-en beskriver tab-elementet.

Uegnet til filter og sortering

Tabs navigerer mellom paneler og kan derfor ikke brukes til å påvirke data. Det kan blant annet toggle group passe godt til.

Toggle group brukt til filter — Toggle group er et godt element å bruke til filtrering.

Tabs brukt til filtrering — Tabs påvirker ikke data direkte.

Automatisk aktivering

Du bør bare bruke automatisk aktivering (selectionFollowsFocus) dersom innholdet i panelet allerede eksisterer i DOMen. Hvis ikke, kan brukeropplevelsen med tastaturnavigasjon være treg.

Endre URL

Tabs bør ikke brukes til sidenavigasjon, da det vil være en uventet oppførsel som kan forvirre brukeren. Det kan også være brudd på WCAG 1.3.1. Men du kan fint endre URLen uten at dette nødvendigvis teller som navigasjon, som en måte å knytte valgt tab til URLen. Dette kan ofte løses ved bruk av shallow-routing, noe de fleste routing-rammeverk støtter. Under er et eksempel med bruk av Nextjs.

JSX

<Tabs 
  value={selectedTab} 
  onChange{() => router.push(url, undefined, {shallow: true})}
>
  <Tabs.List>
    <Tabs.Tab value="tab-1" label="Tab 1" />
    <Tabs.Tab value="tab-2" label="Tab 2" />
  </Tabs.List>
  <Tabs.Panel value="tab-1">Panel 1</Tabs.Panel>
  <Tabs.Panel value="tab-2">Panel 2</Tabs.Panel>
</Tabs>

Bruke eget tabpanel

I noen tilfeller ønsker man ikke å bruke <Tabs.Panel/>. I de tilfellene er det viktig å bruke riktige roller og aria-props. Her er en kode-snippet som løser akkurat det.

JSX

const [value, setValue] = useState("skap");
return (
  <>
    <Tabs value={value} onChange={setValue}>
      <Tabs.List>
        <Tabs.Tab
          value="skap"
          label="Skap"
          id="skap-tab"
          aria-controls="skap-panel"
        />
        <Tabs.Tab
          value="oppvaskmaskin"
          label="Oppvaskmaskin"
          id="oppvaskmaskin-tab"
          aria-controls="oppvaskmaskin-panel"
        />
        <Tabs.Tab
          value="fryser"
          label="Fryser"
          id="fryser-tab"
          aria-controls="fryser-panel"
        />
      </Tabs.List>
    </Tabs>
    <div
      role="tabpanel"
      hidden={value !== "skap"}
      aria-labelledby="skap-tab"
      id="skap-panel"
      tabIndex={0}
    >
      Innhold skap
    </div>
    <div
      role="tabpanel"
      hidden={value !== "oppvaskmaskin"}
      aria-labelledby="oppvaskmaskin-tab"
      id="oppvaskmaskin-panel"
      tabIndex={0}
    >
      Innhold oppvaskmaskin
    </div>
    <div
      role="tabpanel"
      hidden={value !== "fryser"}
      aria-labelledby="fryser-tab"
      id="fryser-panel"
      tabIndex={0}
    >
      Innhold fryser
    </div>
  </>
);

Tilgjengelighet

Tastaturinteraksjon

Komponenten implementerer roving tabindex for fokus og tastaturnavigering mellom knappene.

Som standard må brukeren trykke enter eller space for å aktivere en fane. Du kan endre til automatisk aktivering (der fanen blir valgt automatisk med piltastene) ved å sette prop-en selectionFollowsFocus til true.

Props

Tabs

size?: Type:
"medium" | "small"
Default:
""medium""
Description:
Changes padding and font-size.
onChange?: Type:
((value: string) => void)
Description:
onChange callback for selected Tab.
value?: Type:
string
Description:
Controlled selected value.
defaultValue?: Type:
string
Description:
If not controlled, a default-value needs to be set.
selectionFollowsFocus?: Type:
boolean
Default:
false
Description:
Automatically activates tab on focus/navigation.
loop?: Type:
boolean
Default:
true
Description:
Loops back to start when navigating past last item.
iconPosition?: Type:
"left" | "top"
Default:
""left""
Description:
Icon position in Tab.
fill?: Type:
boolean
Default:
false
Description:
Stretches each tab to fill avaliable space in container.
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLDivElement>
Description:
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). React Docs

Tabs.List

children: Type:
ReactNode
Description:
<Tabs.Tab /> elements.
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLDivElement>
Description:
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). React Docs

Tabs.Tab

label?: Type:
ReactNode
Description:
Tab label.
icon?: Type:
ReactNode
Description:
Tab Icon.
value: Type:
string
Description:
Value for state-handling.
id?: Type:
string
Description:
Overrides auto-generated id.

Warning: Tab generates an id if not provided. If you need to override it, make sure to also include the correct aria-controls id for the TabPanel it controls.
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLButtonElement>
Description:
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). React Docs
as?: Type:
React.ElementType
Description:
OverridableComponent-api

Tabs.Panel

children: Type:
ReactNode
Description:
Tab panel content.
value: Type:
string
Description:
Value for state-handling.
lazy?: Type:
boolean
Default:
true
Description:
If true, will only render children when selected.
id?: Type:
string
Description:
Overrides auto-generated id.

Warning: TabPanel generates an id if not provided. If you need to override it, make sure to also include the correct aria-labelledby id for the Tab that labels it.
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLDivElement>
Description:
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). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

Token	Fallback
--ac-tabs-border	--a-border-divider
--ac-tabs-text	--a-text-default
--ac-tabs-hover-border	--a-border-subtle-hover
--ac-tabs-selected-border	--a-border-action-selected
--ac-tabs-selected-text	--a-text-default
--ac-tabs-focus-text	--a-text-default

Tabs

Egnet til:

Uegnet til:

Eksempler

Retningslinjer

Tekstmengde

Antall tabs

Bare ikoner

Uegnet til filter og sortering

Automatisk aktivering

Endre URL

Bruke eget tabpanel

Tilgjengelighet

Tastaturinteraksjon

Props

Tabs

size?

onChange?

value?

defaultValue?

selectionFollowsFocus?

loop?

iconPosition?

fill?

className?

data-color?

ref?

Tabs.List

children

className?

data-color?

ref?

Tabs.Tab

label?

icon?

value

id?

className?

data-color?

ref?

as?

Tabs.Panel

children

value

lazy?

id?

className?

data-color?

ref?

Tokens