Select
Synonyme: Datalist, Dropdown
Die Select-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.
Konstruktion
Code
<kol-select _options="[{'label':'Herr','value':'Mr.'},{'label':'Frau','value':'Mrs.'},{'label':'Firma','value':'Company'}]" _value="Mrs."> Auswahlfeld </kol-select>
<kol-select _options="[{'label':'Herr','value':'Mr.'},{'label':'Frau','value':'Mrs.'},{'label':'Firma','value':'Company'}]" _multiple _value="['Mr.','Company']">
Auswahlfeld (Mehrfachauswahl)
</kol-select>
<kol-select
_options="[{'label':'Herr','value':'Mr.'},{'label':'Frau','value':'Mrs.'},{'label':'Firma','value':'Company'},{'label':'Herr','value':'Mr2'},{'label':'Frau','value':'Mrs2'},{'label':'Firma','value':'Company2'}]"
_rows="4"
_value="Mrs."
>
Auswahlfeld mit _rows
</kol-select>
Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Eingabefeld wird angeklickt | - |
focus | Eingabefeld wird fokussiert | - |
blur | Eingabefeld verliert Fokus | - |
input | Option wird ausgewählt | value-Attribut der Option |
change | Option wird ausgewählt | value-Attribut der Option |
Beispiel
Auswahlfeld (Mehrfachauswahl)
Verwendung
Die Auswahlmöglichkeiten werden über das Attribut _options als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte label und value angegeben werden.
Beispiel für die Konstruktion des JSON-Objektes:
[
{ "label": "Herr", "value": "Mr." },
{ "label": "Frau", "value": "Mrs." },
{ "label": "Firma", "value": "Company" }
]
Individuelle Höhe angeben
Über das Attribut _rows kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei _multiple) gewechselt werden und dessen Höhe gesetzt werden.
Best practices
- Verzichten Sie darauf, Optionen eines Selects über
disabledzu deaktivieren. Screenreader (getestet mit NVDA) zählen deaktivierte Optionen mit und geben so eine höhere Anzahl an Auswahlmöglichkeiten aus. - Häufig wird die erste Option als „Bitte Option wählen“ angelegt und anschließend deaktiviert, um eine Auswahl zu erzwingen. Dieses Vorgehen sollte vermieden werden.
- Das Ausblenden einer deaktivierten Option mittels
aria-hiddenwird mittlerweile von modernen Browsern blockiert. Verwenden Sie stattdessen eine auswählbare Option mit leerem Wert, wenn eine Platzhalteroption benötigt wird. - Prüfen Sie mit Validatoren, ob eine gültige Option gewählt wurde, anstatt Optionen ohne Angabe von Gründen zu deaktivieren.
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das Auswahlfeld. |
Enter | Öffnet bzw.schließt die Auswahlliste. |
Pfeil-Tasten (oben / unten) | Wechselt in der Auswahlliste das aktivierte Element. Diese Funktion ist auch bei eingeklappter Auswahlliste aktiv. Bei Mehrfachauswahl muss zur Auswahl mehrerer Einträge zusätzlich die Shift-Taste gedrück gehalten werden. |
Single-Select-Filter für Select-Komponente
Die Select-Komponente liefert bei Auswahl eines Wertes eine Liste (Array) mit genau einem Wert zurück (im Single-Modus). Das kann bei der weiteren Verarbeitung zu unnötigem Aufwand führen. Einfacher ist es hier, den Wert der Select-Komponente über einen SingeSelectFormatter zu Filtern. Fügen Sie hierzu im Formular nachfolgende Klasse ein:
class SingleSelectFormatter extends AbstractFormatter { public format(value: unknown): unknown { return [value]; } public parse(value: unknown): unknown { if
(Array.isArray(value) && value.length > 0) { return value[0]; } return value; } }
Fügen Sie den Formatter anschließend der Select-Komponente hinzu:
const singleSelectFormatHandler = new FormatHandler(); singleSelectFormatHandler.formatters.add([new SingleSelectFormatter()]); (this.getInput('kategorie') as
InputControl).setFormatHandler(singleSelectFormatHandler);
Beachten Sie, dass der FormatHandler zunächst in die Form importiert wird.
import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the key combination that can be used to trigger or focus the component’s interactive element. | string | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_hideLabel | _hide-label | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | boolean | undefined | false |
_hideMsg | _hide-msg | Hides the error message but leaves it in the DOM for the input's aria-describedby. | boolean | undefined | false |
_hint | _hint | Defines the hint text. | string | undefined | '' |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; } | undefined |
_id | _id | [DEPRECATED] Will be removed in the next major version. Defines the internal ID of the primary component element. | string | undefined | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot. | string | undefined |
_msg | _msg | Defines the properties for a message rendered as Alert component. | Omit<AlertProps, "_label" | "_variant"> & { _description: string; } | string | undefined | undefined |
_multiple | _multiple | Makes the input accept multiple inputs. | boolean | undefined | false |
_name | _name | Defines the technical name of an input field. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefined | undefined |
_options (required) | _options | Options the user can choose from, also supporting Optgroup. | (Option<StencilUnknown> | Optgroup<StencilUnknown>)[] | string | undefined |
_required | _required | Makes the input element required. | boolean | undefined | false |
_rows | _rows | Defines how many rows of options should be visible at the same time. | number | undefined | undefined |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string | undefined | undefined |
_tabIndex | _tab-index | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | undefined | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_touched | _touched | Shows if the input was touched by a user. | boolean | undefined | false |
_value | _value | Defines the value of the input. | StencilUnknown[] | boolean | null | number | object | string | undefined | undefined |
Methods
getValue
getValue() => Promise<StencilUnknown[] | StencilUnknown>
Returns the current value.
Returns
Type: Promise<StencilUnknown | StencilUnknown[]>
kolFocus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Die Beschriftung des Eingabefeldes. |