Gå til hovedinnhold
KOMPONENTER

Segmented Control

npmv7.1.9

Segmented Controls tilbyr nært beslektede valg som påvirker et objekt, en tilstand eller en visning. De består av et sett med to eller flere knappsegmenter, der alle segmentene innen en gruppe har lik bredde.

npm install @entur/form
@import '@entur/form/dist/styles.css';

Komponenter

SegmentedControl

import { SegmentedControl } from '@entur/form';
NavnTypeBeskrivelse
name?string

Navn på input-elementene

label?string

Beskrivende tekst

children?ReactNode

En eller flere SegmentedChoice-komponenter

selectedValueSelectedValue

Den valgte verdien

onChange(value: SelectedValue) => void

Callback for når det gjøres et valg

size?"medium" | "large"

Størrelsen på SegmentedChoice-komponentene

className?string

Ekstra klassenavn

SegmentedControl wrapper to eller flere SegmentedChoice-komponenter, og lar brukeren velge mellom forskjellige valg. For å kunne velge flere valg, bruk MultipleSegmentedControl.

SegmentedChoice

import { SegmentedChoice } from '@entur/form';
NavnTypeBeskrivelse
children?ReactNode

Innhold som beskriver valget

className?string

Ekstra klassenavn

value?string | (string & readonly string[])

Verdien til valget

onChange?(((e: ChangeEvent<HTMLInputElement>) => void) & ChangeEventHandler<HTMLInputElement>)

Callback som kalles når komponenten endres

SegmentedChoice wrapper et valg inni en SegmentedControl eller MultipleSegmentedControl. Send inn en unik value som identifiserer valget, og send inn hva du vil (typisk en tekst eller et ikon) som children.

Husk beskrivelser for skjermlesere
Om du sender inn ikoner eller tekster som krever en visuell kontekst, er det viktig at du sender inn en aria-label prop, eller bruker VisuallyHidden(fra @entur/a11y) for å gi valget en god beskrivelse.

MultipleSegmentedControl

import { MultipleSegmentedControl } from '@entur/form';
NavnTypeBeskrivelse
name?string

Navn på input-elementene

label?string

Beskrivende tekst

children?ReactNode

En eller flere SegmentedChoice-komponenter

selectedValueSelectedValues

Den eller de valgte verdiene

onChange(value: SelectedValues) => void

Callback for når det gjøres et valg

MultipleSegmentedControl er lik som SegmentedControl, men tillater brukeren å velge flere valg på en gang. Dette gjør at selectedValue-propen må være et objekt, der nøklene korresponderer til value-verdien i de nøstede SegmentedChoice-komponentene. onChange vil også bli kalt med samme objektet.

Et eksempel kan være:

<MultipleSegmentedControl
  selectedValue={{ italics: true, bold: false }}
  onChange={{ italics, bold } => changeFormatting({ italics, bold })}
>
  <SegmentedChoice value="italics"><em>Italics</em></SegmentedChoice>
  <SegmentedChoice value="bold"><strong>Bold</strong></SegmentedChoice>
</MultipleSegmentedControl>

Retningslinjer for bruk

Segmented Control benyttes fremst til å velge en setting. De tilbyr et kontekstuelt valg, som er knyttet 1:1 til andre objekter eller skjemagrupper. Valgt segment definerer ‘regler’ for verdiene i tilknyttede felter. Segmented controls benyttes altså ofte som velgere/settings for andre felter, f.eks. om verdien som angis skal i prosent eller kroner, eller om tidspunkt skal gjelde for avreise eller ankomst. De plasseres gjerne ovenfor/før feltet de styrer over, eller under/etter i tilfelle konteksten tillater dette.

Segmented control har samme funksjon som en radiobutton, det vil si at én av verdiene er forhåndsvalgt, og den predefinerte verdien kan byttes ut med en annen i samme rekke. Kun én av verdiene innen en segmented control kan velges.

For å oppnå best mulig brukervennlighet, bør en Segmented Control ikke ha fler enn fem segmenter. Alle segmenter bør ha samme bredde. Det er lettere for brukeren å “tappe” bredere segmenter.

Bruk kun en Segmented Control når alternativene er forhåndsdefinerte. Hold segmentinnholdet kort og konsistent. Segmented Controls skal benyttes med kun tekst eller tegn, ikke ikon + tekst.

Eksempler

Eksempel 1

Eksempel 2

Eksempel 3

Rediger denne siden på Bitbucket