Select
Selects bieten dem User die Möglichkeit, zwischen verschiedenen Optionen eine (Single Select) oder mehrere (Multi Select) zu wählen.
- Schrack Seconet
- Neutral
- Verwendung
Beispiel
Das Select kann sich in vier verschiedenen Zuständen befinden:
- Empty
- Filled (Optionen können dabei entweder auf- oder zugeklappt sein): inkl. einem "x"-Icon zum Abwählen der Option
- Error: es wurde keine Option selektiert, jedoch ist diese obligatorisch
- Disabled
Außerdem gibt es folgende Varianten, die sich in den oben genannten Zuständen befinden können:
- Default (ohne Icon)
- Small (ohne Icon)
- Default (mit Icon)
- Small (mit Icon)
Interaktionen
Der Unterschied zwischen Single und Multi Select liegt bei der Anzahl der gewählten Elemente, wie diese dargestellt werden und wie man mit ihnen interagieren kann. Die selektierten Optionen werden im Multi Select in eine Pill gepackt und können einzeln entfernt werden, es besteht auch die Option alle ausgewählten Elemente zu entfernen. Da es sich beim Single Select ohnehin nur um ein Element handelt, kann dieses ebenfalls durch das "x"-Icon abgewählt werden.
Um klar zu verdeutlichen, dass es sich, um ein Multi Select handelt, werden den Optionen zusätzlich Checkboxen beigefügt.
Der Select beinhaltet in geöffnetem Zustand ein Dropdown-Menü. Die einzelnen Dropdown-Items können je nachdem, ob das Elternelement ein Single oder Multi Select ist eine Checkbox mit Label oder nur ein Label enthalten. Zusätzlich verfügt das Dropdown-Item über einen Hover-Effekt. Im Beispiel unterhalb, werden alle Varianten dargestellt.
Zur Verdeutlichung noch ein interaktiver Prototyp zum Testen.