SegmentedControl

npm install @entur/form

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

Oversikt

SegmentedControl

SegmentedControl grupperer to eller flere valg og lar brukeren velge ett alternativ. Den kan brukes kontrollert med value eller ukontrollert med defaultValue.

SegmentedControl.Item og SegmentedChoice

Hvert valg angis med SegmentedControl.Item (foretrukket) eller SegmentedChoice. Send inn en unik value som identifiserer valget, og bruk tekst og/eller ikon som innhold.

Retningslinjer

• Egnet til: filtrering av innhold og veksling mellom visninger/innstillinger. Passer godt for valg som påvirker nærliggende innhold (f.eks. "Avreise" vs. "Ankomst").
• Uegnet til: navigasjon mellom paneler/sider (bruk Tabs), og som erstatning for RadioGroup i skjema med innsending.
• 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 (≤ 5). Sørg for at alle valg er synlige på skjermen. Hold tekstene korte og konsistente.
• Ikoner: kun ikoner kan brukes for ekspertbrukere. Gi alltid en skjermleser-tekst med aria-label når innholdet ikke er selvdokumenterende.
• Label: bruk label for å beskrive hva valget styrer for å gjøre det 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

Ukontrollert med defaultValue

Kun ikoner med skjermleser-tekst

Tilgjengelighet

• SegmentedControl har role="radiogroup" og hvert valg har role="radio" med aria-checked for valgt tilstand.
• Roving tabindex: piltaster flytter fokus mellom valg. Space/Enter velger, Escape fjerner fokus.
• Bruk label for å beskrive hva valgene styrer, og aria-label på valg som kun har ikon.
• Knytt gjerne komponenten til innholdet den styrer med aria-controls på SegmentedControl når relevant.

Props

SegmentedControl

Denne komponenten har ingen props

SegmentedChoice

Denne komponenten har ingen props