Segmented Control

npm install @entur/form

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

Varianter

SegmentedControl

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

SegmentedChoice

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.

MultipleSegmentedControl

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

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

Props

SegmentedControl

import { SegmentedControl } from '@entur/form';

Denne komponenten har ingen props

SegmentedChoice

import { SegmentedChoice } from '@entur/form';

Denne komponenten har ingen props

MultipleSegmentedControl

import { MultipleSegmentedControl } from '@entur/form';

Denne komponenten har ingen props