Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Mit der Dropdown-Komponente wird eine Reihe von Optionen angezeigt, aus denen Benutzer eine Option auswählen können. In Dropdowns werden Optionen schrittweise angezeigt, sodass Benutzer nicht zu viele Informationen gleichzeitig sehen. Sie können auch zum Gruppieren von Informationen verwendet werden. Dropdowns werden immer durch eine Feldbeschriftung oder einen Titel ergänzt, die vor dem Steuerelement positioniert sind.
Diese Komponente gibt es in vier Varianten: Auswahl, Mehrfachauswahl, Kombinationsfeld und Mehrfach-Kombinationsfeld.
Mit der Variante Mehrfachauswahl der Dropdown-Komponente können Benutzer mehrere Optionen aus einer Liste auswählen.
Die Liste der Auswahlmöglichkeiten ist komplex genug, dass Durchsuchen und Filtern sinnvoll sind. Verwenden Sie stattdessen das Mehrfach-Kombinationsfeld.
Es gibt eine kleine Anzahl von Optionen (5 oder weniger), aus denen Benutzer wählen können. Verwenden Sie Kontrollkästchen für Mehrfachauswahlelemente.
Wenn Sie das Dropdown-Menü zum Sortieren verwenden, sollten Sie die Optionen in einer entsprechenden Reihenfolge anordnen. Beispiel:
Von der häufigsten zu der am wenigsten häufigen Option
Von der einfachsten zur komplexesten Option
Von der am wenigsten riskanten zur riskantesten Option
Die erste Option wird oben in der Liste angezeigt.
Ordnen Sie die Liste der Optionen nicht alphabetisch an, es sei denn, dies ist für Ihren Anwendungsfall sinnvoll. Listen mit Ländern und anderen Problemen mit bekannten Elementen lassen sich oft problemlos alphabetisch ordnen. Sie müssen jedoch sicher sein, dass die Benutzer den Namen ihrer Auswahl eindeutig kennen.
Positionieren Sie die Dropdown-Beschriftung außerhalb des Felds, sodass sie immer sichtbar ist. Auf ein Dropdown-Menü ohne Beschriftung kann nicht zugegriffen werden.
Ersetzen Sie Feldbeschriftungen nicht durch Platzhaltertext im Feld. Das beeinträchtigt die Gebrauchstauglichkeit und hat viele negative Folgen.
Positionieren Sie eine dauerhafte Beschriftung außerhalb des Felds.
Verwenden Sie keinen Platzhaltertext als Ersatz für die Beschriftung.
Beschränken Sie jede Dropdown-Option auf eine Textzeile. Wenn der Text zu lang für eine Zeile ist, können Sie eine Ellipse (...) für Überlaufinhalte hinzufügen und eine browserbasierte QuickInfo hinzufügen, um die vollständige Zeichenfolge anzuzeigen. Es wird jedoch empfohlen, Kürzen nach Möglichkeit zu vermeiden.
Halten Sie Menüelemente prägnant.
Verwenden Sie keine langen Menüelemente, die gekürzt werden müssen.
Verwenden Sie Hilfetext, um Kontext bereitzustellen und zu vermitteln, was ausgewählt oder wie eine Option ausgewählt werden soll. Hier einige Beispiele dafür, welche Informationen Sie im Hilfetext angeben können:
Eine allgemeine Beschreibung der Dropdown-Optionen
Hinweise, die den Benutzer bei der richtigen Auswahl unterstützen
Mehr Kontext dazu, warum ein Benutzer eine Auswahl treffen muss
Verwenden Sie Hilfetext nur für relevante Informationen. Vermeiden Sie Hilfetexte, die lediglich dieselben Informationen wiedergeben, die bereits in der Beschriftung stehen.
Verwenden Sie für Hilfetext die übliche Groß- und Kleinschreibung. Schreiben Sie 1 bis 2 kurze, vollständige Sätze, die mit einem Punkt enden.
Verwenden Sie Hilfetext, um Informationen zum Kontext zu geben.
Wiederholen Sie im Hilfetext nicht einfach die Informationen, die bereits in der Beschriftung stehen.
Der Text der Fehlermeldung erklärt dem Benutzer, wie er den Fehler beheben kann. Bei Dropdown-Menüs hängen Fehler oft mit etwas zusammen, das für die Inline-Validierung korrigiert werden muss. Wenn beispielsweise keine Deckungen ausgewählt sind und es sich dabei um ein Pflichtfeld handelt, können Sie dem Benutzer mithilfe eines Fehlertexts eine Lösung aufzeigen: „Wählen Sie den gewünschten Kfz-Versicherungsschutz aus.“
Verwenden Sie für Fehlertext die übliche Groß- und Kleinschreibung. Schreiben Sie 1 bis 2 kurze, vollständige Sätze, die mit einem Punkt enden.
Verwenden Sie Fehlermeldungstexte, um den Benutzer anzuleiten und ihm eine Lösung aufzuzeigen.
Schreiben Sie keine zweideutigen Fehlermeldungen und lassen Sie die Benutzer nicht im Unklaren darüber, wie ein Problem zu lösen ist.
Markieren Sie erforderliche Felder mit einem Sternchen (*). Das Sternchen steht vor der Feldbeschriftung. Benutzer können so leicht herausfinden, welche Felder erforderlich sind, indem sie nur das Zeichen ganz links in der Beschriftung prüfen.
Zusätzlich zur Markierung erforderlicher Felder mit einem Sternchen wird empfohlen, klare Anweisungen am oberen Rand des Formulars einzufügen, z. B. „Alle mit einem Sternchen gekennzeichneten Felder sind Pflichtfelder“, um sicherzustellen, dass die Benutzer die Bedeutung des Sternchens verstehen.
Verwenden Sie ein Sternchen, um anzuzeigen, dass ein Feld ein Pflichtfeld ist.
Verwenden Sie kein Sternchen, um optionale Elemente zu kennzeichnen.
Die Variante Mehrfachauswahl wird ohne Wert (Standard), mit Platzhaltertext oder mit vorausgefüllter Eingabe angezeigt.
Visualisierung
Zustand
Beschreibung
Kein Wert (Standard)
Zeigt dem Benutzer an, dass kein Wert ausgewählt wurde und kein Platzhalter vorhanden ist.
Platzhalter
Zeigt dem Benutzer an, dass kein Wert ausgewählt wurde. Der Platzhalter ist ausgegraut.
Vorausgefüllte Eingabe
Gibt für den Benutzer an, dass die Eingabe mit Daten vorausgefüllt ist.
Die Mehrfachauswahl verfügt auch über interaktive Zustände für Aktiviert, Fokus, Deaktiviert, Fehler, Schreibgeschützt und Nur Anzeige.
Zustand
Beschreibung
Aktiviert
Zeigt dem Benutzer an, dass das Element für die Interaktion aktiviert ist.
Fokussiert
Zeigt dem Benutzer an, auf welchem UI-Element im System der Fokus liegt.
Deaktiviert
Zeigt dem Benutzer an, dass der Eingabewert aufgrund lokaler Faktoren nicht geändert werden kann. Zum Beispiel muss ein Kontrollkästchen über dem Eingabefeld aktiviert sein, um auf dieses Eingabefeld zuzugreifen. Der Benutzer kann durch Interaktion mit der Seite eine Aktion zur Aktivierung durchführen.
Fehler
Zeigt an, dass der Benutzer einen Fehler bei der Validierung gemacht hat. Der Fehlertext gibt dem Benutzer eine korrigierende Rückmeldung.
Schreibgeschützt
Zeigt dem Benutzer an, dass der Eingabewert aufgrund externer Faktoren nicht geändert werden kann. Beispiel: fehlender Schreibzugriff. Der Benutzer kann Maßnahmen zur Aktivierung ergreifen, indem er sich z. B. an einen Administrator wendet.
Nur Anzeige
Der Zustand „Nur Anzeige“ wird in zwei Fällen verwendet:
Ein UI-Element wird im Anzeigemodus verwendet.
Ein UI-Element wird im Bearbeitungsmodus angezeigt, ist aber nie bearbeitbar.
Dieser Zustand wurde zuvor als „Schreibgeschützt“ bezeichnet.
Die folgende Abbildung veranschaulicht die interaktiven Zustände der Mehrfachauswahl.
Das Dropdown-Menü wird mit der Leertaste erweitert und reduziert. Benutzer navigieren mit den Pfeiltasten durch die Optionen und wählen mit der Leertaste oder der Eingabetaste eine Option aus.
aria-labelledby stellt eine programmgesteuerte Verknüpfung zwischen dem Eingabefeld und seiner Beschriftung her. Das WAI-ARIA-Attribut aria-autocomplete='list' gibt an, dass eine Auswahlliste angezeigt wird, aus der der Benutzer eine Option auswählen kann, das Bearbeitungsfeld jedoch den Fokus behält. Wenn in Storybook die Option „required“ ausgewählt wird, werden die Attribute „required“ und „aria-required="true"“ zum Eingabefeld hinzugefügt.
Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.
Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.
Bei Verwendung dieser Komponente in Ihren Anwendungen:
Erleichtern Sie den Benutzern das Verständnis der Inhalte und verwenden Sie keine zu langen Bezeichnungen für Optionen.
Verwenden Sie keine implizit fokussierbaren Elemente wie Schaltflächen, Kontrollkästchen und Links und keine implizit semantischen Inhalte wie Überschriften in Dropdown-Komponenten.
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.
Warning: An die Komponente MultipleSelect können keine anderen untergeordneten Optionen als SelectOption übergeben werden. Auch wenn dies funktionieren kann, kann es zu unerwartetem Verhalten führen oder durch in künftigen Versionen eingeführte Änderungen beeinträchtigt werden.
If set to true, the tags are displayed permanently in expanded view. This overrides the default behavior where excess tags collapse into a tag containing aggregated options.
Value of the component. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Wenn die Tags der ausgewählten Optionen den Komponentenbereich überschreiten, werden einige in einem einzelnen Tag zusammengeführt, das die Anzahl der nicht angezeigten ausgewählten Optionen angibt. Durch Klicken auf dieses Tag wird die Komponente vertikal erweitert, sodass alle Tags der ausgewählten Optionen angezeigt werden. Nachdem die Options-Tags erweitert wurden, können sie nicht mehr ausgeblendet werden.
Um dieses Verhalten zu überschreiben und alle Options-Tags dauerhaft in einer erweiterten Ansicht anzuzeigen, legen Sie die Eigenschaft tagsAlwaysExpanded auf true fest. Zum Vergleich der beiden Verhalten siehe diese Beispiele.
Alle Dropdown-bezogenen Komponenten definieren die Liste der verfügbaren Optionen über die Eigenschaft children des Typs ReactNode. Sie können nur die folgenden Unterkomponenten als untergeordnete Komponenten verwenden:
SelectOption verwendet in Select und MultipleSelect
ComboboxOption verwendet in Combobox und MultipleCombobox
Warning:
SelectOption und ComboboxOption dürfen nur im Kontext ihrer jeweiligen „übergeordneten“ Komponente verwendet werden. Obwohl sie möglicherweise allein verwendet werden können, wird dies nicht unterstützt.
Bei den Komponenten Select und MultipleSelect ist nur vorgesehen, dass SelectOption-Komponenten als untergeordnete Komponenten unterstützt werden. Auch wenn sie möglicherweise andere Typen oder HTML-Elemente anzeigen oder verarbeiten können, wird dies nicht unterstützt.
Bei den Komponenten Combobox und MultipleCombobox ist nur vorgesehen, dass ComboboxOption-Komponenten als untergeordnete Komponenten unterstützt werden. Auch wenn sie möglicherweise andere Typen oder HTML-Elemente anzeigen oder verarbeiten können, wird dies nicht unterstützt.
Jegliche Verwendung dieser Komponenten außerhalb des unterstützten Geltungsbereichs fällt nicht unter die Verpflichtung der Non-Breaking Changes, da eine solche Verwendung nicht als Bestandteil des Komponentenvertrags gilt. Diese Verwendungen können zu unerwartetem Verhalten führen oder durch in künftigen Versionen eingeführte Änderungen beeinträchtigt werden.
Die Jutro-Eingaben haben imperative Handler als Mechanismus implementiert, um Zugang zu einigen gängigen nativen Funktionen zu bieten, die für Sie nützlich sein könnten. Die folgenden Funktionen sind verfügbar:
Fokus setzen ermöglicht es, den Fokus des Benutzers auf eine bestimmte Komponente zu setzen.
Fokus aufheben ermöglicht es, den Fokus von der Komponente zu entfernen.
Zur Komponente scrollen ermöglicht es, den Benutzer zu einem bestimmten Bereich der Seite zu führen.
Diese Funktionen werden über die ref-Eigenschaft bereitgestellt, die sie wie folgt verfügbar macht:
Obwohl einige Jutro-Komponenten ergänzende Funktionen oder eine Hilfsfunktion zur Erleichterung des Validierungsprozesses bereitstellen, liegt es in Ihrer Verantwortung als Entwickler, die Validierung von Benutzereingaben (mit oder ohne Verwendung der ergänzenden Hilfsfunktionen) durchzuführen und zu entscheiden, welche Fehlermeldungen angezeigt werden sollen.
Das Verhalten von Jutro-Komponenten hängt von der Implementierung durch den Entwickler ab.
Wann werden Fehlermeldungen angezeigt?
Fehlermeldungen werden nur angezeigt, wenn Sie sie über die Eigenschaft stateMessages an die Komponente übergeben. Diese Eigenschaft empfängt ein Objekt mit dem folgenden Inhalt:
Die Komponente zeigt alle bereitgestellten Fehlermeldungen in der gleichen Reihenfolge wie im Array an.
Wann erfolgt die Validierung?
Dies ist Ihre Entscheidung als Entwickler. Da die Komponenten nicht festlegen, wann die Validierung durchgeführt wird oder wann der Fehler angezeigt werden muss, müssen Sie die Logik für die Behandlung entsprechend den Projektanforderungen implementieren, z. B. während der Benutzer den Inhalt bearbeitet, wenn die Komponente den Fokus verliert und bei der Formularübermittlung.
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie MultipleSelect verwenden können. Auf den spezifischen Registerkarten finden Sie Einzelheiten zu den Funktionen, die die Komponente umfasst.
Note: Die meisten Funktionen und Eigenschaften der vier verfügbaren Dropdown-Komponenten unterscheiden sich bei der Verwendung nicht. Einige Beispiele aus anderen Komponenten können auch für MultipleSelect relevant sein.
Sie können jede der Dropdown-Komponenten vollständig deaktivieren, indem Sie die Eigenschaft disabled auf true festlegen. Mit der Eigenschaft disabled der Komponenten SelectOption und ComboboxOption können Sie auch nur bestimmte Optionen deaktivieren. Wenn die gesamte Komponente deaktiviert ist, hat die Eigenschaft disabled der Optionen keine Auswirkungen.
Dieses Verhalten ist bei allen Dropdown-Komponenten gleich: Wenn die value-Eigenschaft festgelegt ist, kann der Benutzer die Komponente nicht direkt ändern. Stattdessen wird sie vollständig über die Implementierung durch Entwickler verwaltet.
Dieses Beispiel gilt für alle Dropdown-Komponenten:
exportfunctionMultiSelectControlled(){ const[updatedValue, setNewValue]=useState([]); constonChange=(e, newValue)=>{ setNewValue(newValue); }; const options =[ <SelectOption value={{ id:'1', label:'Option 1', }} />, <SelectOption value={{ id:'2', label:'Option 2', }} />, <SelectOption value={{ id:'3', label:'Option 3', }} />, <SelectOption value={{ id:'4', label:'Option 4', }} />, <SelectOption value={{ id:'5', label:'Option 5', }} />, ]; return( <div> <MultipleSelect label="Choose values" secondaryLabel="This value will be passed to the list of options below" onChange={onChange}> {options} </MultipleSelect> <br/> <MultipleSelect label="Changes with the above" value={updatedValue}> {options} </MultipleSelect> </div> ); }
Mit der Eigenschaft ref und den zwingend erforderlichen Handlern (focus, blur und scrollIntoView) ist es möglich, verschiedene native Aktionen auszuführen. Ein Beispiel ist das Setzen des Fokus auf die Komponente.
Siehe folgendes Beispiel mit der Komponente Select:
In den Dropdown-Komponenten lässt sich der Validierungsprozess nicht durchführen, aber Sie können den Fehlerstatus und die anzuzeigenden Meldungen über die Eigenschaft stateMessages bearbeiten.
Die Logik der Statusmeldungen gilt für alle Dropdown-Komponenten. Nachfolgend ein Beispiel für MultipleSelect:
Das Standardverhalten der MultipleSelect-Komponente besteht darin, Options-Tags zu reduzieren, wenn sie nicht in eine einzige Zeile passen. Die Komponente wird zu einer Ansicht mit mehreren Zeilen erweitert, wenn Sie auf das Tag mit den zusammengeführten Optionen klicken. Dieses Verhalten wird über die Eigenschaft tagsAlwaysExpanded gesteuert, die standardmäßig auf false festgelegt ist.
Um das Löschen der Eingabe mit einem einzigen Klick auf die Symbolschaltfläche zu aktivieren, legen Sie die clearable-Eigenschaft auf true fest. Die Schaltfläche wird angezeigt, wenn mindestens eine Option ausgewählt ist. Der Benutzer kann die Auswahl der Optionen auf einmal aufheben.
Die tagsAlwaysExpanded-Eigenschaft wurde hinzugefügt. Wenn sie auf true festgelegt ist, wird das Standardverhalten für reduzierte Options-Tags überschrieben.
Die clearable-Eigenschaft wurde hinzugefügt. Wenn sie auf true festgelegt ist, kann der Benutzer mit einem einzigen Klick auf die Symbolschaltfläche die Auswahl der Optionen aufheben.
Es wurde die neue Komponente @jutro/components/MultipleSelect eingeführt.
Die frühere Komponente DropdownSelectField wurde abgekündigt und in das @jutro/legacy-Paket verschoben. Um die entsprechende Dokumentation anzuzeigen, wechseln Sie zu einer Version der Dokumentation, die älter als 10.0 ist.
Aufbau der Dropdown-Komponente, Variante Mehrfachauswahl.
