Select Combobox

[jeffreylauwers]

We willen graag meer leren over de Select Combobox component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Select Combobox

Doel

Biedt de mogelijkheid om één optie te selecteren, waarbij de getoonde opties kunnen worden gefilterd door tekst in een invoerveld in te voeren.

Ook bekend als

Autocomplete, Autosuggest, Typeahead.

Gerelateerde componenten

Select, Search Input

Onderzoek

Editable Combobox With List Autocomplete Example - | APG | WAI | W3C
In dit artikel wordt o.a. informatie gegeven over Accessibility Features en Keyboard support voor een component zoals Select combobox.

Building an accessible autocomplete control - Adam Silver
In dit artikel beschrijf Adam Silver hoe hij een toegankelijk autocomplete formcontrol zou opbouwen.

ARIA: combobox role - MDN docs
In dit artikel wordt het gebruik/toepassing van de aria combobox rol beschreven.

Combobox - Adobe Spectrum
Het Adobe Spectrum design system heeft een documentatiepagina voor de Combobox component. Zij beschrijven hier gedrag en richtlijnen voor gebruik met visuele ondersteuning.

[jeffreylauwers]

Den Haag

Figma - Huidig

---

Screenshots / Varianten

Figma huidig

One option possible

Multiple options possible

---

Notities

• Onder de naam: Combo box.
• Documentatie aanwezig (Figma huidig)
• Single select en Mulit select variant
• Tekst invullen gebeurd direct onder de trigger en boven de lijst aan opties.
• Bij de Single select variant kan de gekozen optie worden verwijderd door op het 'cross' icoon te klikken.
• Bij de Multi select variant worden gekozen opties als 'Pill' weergegeven, deze kunnen worden verwijderd door op het 'cross' icoon binnen de Pill te klikken.

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Default

Default

Open

Typing

Selected

Met checkboxes

Default

Open

Selected

---

Notities

• Onder de naam: Combo box.
• Documentatie aanwezig.
• Single select en Mulit select variant.
• 'Search' icon vooraan.
• Tekst invullen gebeurd binnen het veld.
• Wanneer er onder de component geen ruimte is binnen de viewport klapt de lijst met opties naar boven open.
• Bij de Single select variant kan de gekozen optie worden verwijderd door op het 'cross' icoon te klikken.
• Bij de Multi select variant worden gekozen opties als 'Chip' weergegeven, deze kunnen worden verwijderd door op het 'cross' icoon binnen de Chip te klikken. Wanneer er meer dan 2 opties zijn gekozen is ook een 'Verwijder alles' optie aanwezig.

[tomootes]

Wat ik goed vind aan deze versie is dat het helder is dat je kan zoeken. Bij veel van dit soort componenten ben je verrast dat er opties tevoorschijn komen op het moment dat je iets typt in het veld. Vaak lijkt het gewoon een leeg textveld. Hier zorgen het icoontje en hier driehoekje (carret) voor duidelijkheid.

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

Open

Selected

Color options

Icon options

Font familiy options

Right-to-left

Long text

---

Notities

• Onder de naam: Combobox.
• Documentatie aanwezig rondom toetsenbord interactie, role, aria en auto-complete.
• Geen iconen binnen veld.
• Veel verschillende varianten zoals bijvoorbeeld kleur, iconen en font-familiy
• Support voor right-to-left en lange teksten.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Select Combobox op het Community bord