SegmentedControl

() => {
  const [travelTime, setTravelTime] = React.useState('na');
  return (
    <SegmentedControl
      label="Velg reisetidspunkt"
      value={travelTime}
      onChange={setTravelTime}
    >
      <SegmentedControl.Item value="na">Nå</SegmentedControl.Item>
      <SegmentedControl.Item value="avreise">Avreise</SegmentedControl.Item>
      <SegmentedControl.Item value="ankomst">Ankomst</SegmentedControl.Item>
    </SegmentedControl>
  );
}

Bruk SegmentedControl når

SegmentedControl grupperer to eller flere nært beslektede alternativer og lar brukeren velge nøyaktig ett av dem. Passer godt til filtrering av innhold og veksling mellom visninger/innstillinger — for eksempel valg som påvirker nærliggende innhold (som «Avreise» vs. «Ankomst»).

Unngå SegmentedControl når

du trenger navigasjon mellom paneler eller sider, bruk heller Tabs
det er et skjema med innsending, bruk heller RadioGroup

Retningslinjer

Plassering: plasser komponenten nær innholdet den styrer. Bruk aria-controls hvis den styrer innhold lenger nede på siden.
Antall og bredde: hold antall valg lavt (maks 5). Sørg for at alle valg er synlige på skjermen. Hold tekstene korte og konsistente.
Ikoner: kun ikoner kan brukes for erfarne brukere. Gi alltid en skjermleser-tekst med aria-label når innholdet ikke er selvforklarende.
Label: bruk label for å beskrive hva valget styrer, slik at det blir lettere for brukeren å forstå der det er nødvendig.

Anbefalingene er inspirert av bruksmønstre i ToggleGroup i Aksel og Designsystemet.

Eksempler

Endret visning avhengig av valg
() => {
  const [type, setType] = React.useState('avreise');
  const [dateTime, setDateTime] = React.useState(now('Europe/Oslo'));
  return (
    <>
      <SegmentedControl
        label="Velg reisetidspunkt"
        value={type}
        onChange={setType}
      >
        <SegmentedControl.Item value="nå">Nå</SegmentedControl.Item>
        <SegmentedControl.Item value="avreise">Avreise</SegmentedControl.Item>
        <SegmentedControl.Item value="ankomst">Ankomst</SegmentedControl.Item>
      </SegmentedControl>
      {type !== 'nå' && (
        <div style={{ display: 'flex', gap: '1rem' }}>
          <DatePicker
            label={type === 'avreise' ? 'Avreisedato' : 'Ankomstdato'}
            selectedDate={dateTime}
            onChange={date => setDateTime(date)}
          />
          <TimePicker
            label="Tidspunkt"
            selectedTime={dateTime}
            onChange={time => setDateTime(time)}
          />
        </div>
      )}
    </>
  );
}

Ukontrollert med defaultValue
() => (
  <SegmentedControl label="Visning" defaultValue="liste">
    <SegmentedControl.Item value="liste">Liste</SegmentedControl.Item>
    <SegmentedControl.Item value="graf">Graf</SegmentedControl.Item>
    <SegmentedControl.Item value="tabell">Tabell</SegmentedControl.Item>
  </SegmentedControl>
)

Kun ikoner med skjermleser-tekst
() => (
  <SegmentedControl label="Tekstjustering" defaultValue="left">
    <Tooltip content="Venstrejuster">
      <SegmentedControl.Item value="left" aria-label="Venstrejuster">
        <AlignLeftIcon aria-hidden />
      </SegmentedControl.Item>
    </Tooltip>
    <Tooltip content="Midtstill">
      <SegmentedControl.Item value="center" aria-label="Midtstill">
        <AlignCenterIcon aria-hidden />
      </SegmentedControl.Item>
    </Tooltip>
    <Tooltip content="Høyrejuster">
      <SegmentedControl.Item value="right" aria-label="Høyrejuster">
        <AlignRightIcon aria-hidden />
      </SegmentedControl.Item>
    </Tooltip>
  </SegmentedControl>
)