Segmented Control
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';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';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
import { MultipleSegmentedControl } from '@entur/form';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.