InputColor
Synonyme: Farbeingabefeld, Farbauswahl, Color Input, Color Picker
Beschreibung: Mit InputColor kann eine Farbe als hexadezimaler Farbwert eingegeben oder über den nativen Farbwahldialog des Browsers ausgewählt werden.
Die Komponente besteht aus einem Eingabefeld für HEX-Farbwerte sowie einer Schaltfläche, welche die aktuell ausgewählte Farbe anzeigt und über die der native Farbwahldialog des Browsers geöffnet werden kann.
Beispiel
Einfaches Farbwahlfeld mit Beschriftung und Standard-Farbe:
<KolInputColor _label="Favoriten-Farbe" _value="#d4fcf4" />Barrierefreiheit
- Das Eingabefeld muss mit einer aussagekräftigen Beschriftung (
_label) versehen werden. - Zusätzliche Hinweise können über
_hint, Fehlermeldungen über_msgbereitgestellt werden. - Darstellung, Bedienung und Unterstützung des nativen Farbwahldialogs durch assistive Technologien können je nach Browser und Betriebssystem variieren.
Konkrete Designentscheidungen
| Entscheidung | Begründung |
|---|---|
Verwendung des nativen HTML5-Eingabetyps color | Die Komponente nutzt bewusst den nativen HTML5-Eingabetyp color und profitiert dadurch von dessen standardisierter Unterstützung durch Browser und assistive Technologien. |
| Kombination aus Texteingabe und Farbfeld | Die Komponente ergänzt den nativen HTML5-Eingabetyp um ein Eingabefeld für HEX-Farbwerte. Dadurch können Farben sowohl direkt per Tastatur eingegeben als auch über den nativen Farbwahldialog ausgewählt werden. |
| Fokusmanagement | Die Basis-Komponente setzt den nativen Fokusring zurück. Der sichtbare Fokusindikator wird durch das jeweils verwendete Theme bereitgestellt. |
Links und Referenzen
Verwendung
- Die aktuell ausgewählte Farbe kann über
_valueals hexadezimaler Farbwert festgelegt werden. - Das Eingabefeld und das Farbfeld werden automatisch synchronisiert, sodass Änderungen an einem Element unmittelbar im anderen übernommen werden.
- Bei der Eingabe eines HEX-Farbwerts wird das führende
#automatisch ergänzt.
Hinweis: Die Darstellung und der Funktionsumfang des nativen Farbwahldialogs werden durch den Browser und das Betriebssystem bestimmt und können je nach Plattform variieren.
Tastatursteuerung
Die Tastaturbedienung des nativen Farbwahldialogs wird durch den Browser und das Betriebssystem bestimmt. Darstellung, Bedienung und verfügbare Funktionen können sich daher je nach Browser, Betriebssystem und Endgerät unterscheiden.
Für die KoliBri-Komponente werden typischerweise folgende Tastaturfunktionen unterstützt:
| Taste | Funktion |
|---|---|
Tab | Fokus auf das Eingabefeld, das Farbfeld bzw. das nächste fokussierbare Element setzen. |
Shift+Tab | Fokus auf das vorherige fokussierbare Element setzen. |
Enter / Leertaste | Öffnen des nativen Farbwahldialogs, wenn das Farbfeld fokussiert ist. |
Best Practices / Empfehlungen
- Nutzen Sie
_valuemit einem hexadezimalen Farbwert (z. B.#d4fcf4), um eine Vorauswahl festzulegen. - Verwenden Sie eine aussagekräftige Beschriftung (
_label), damit Nutzende erkennen, welche Farbe ausgewählt werden soll (z. B. „Primärfarbe“ oder „Hintergrundfarbe“). - Nutzen Sie
_hint, um ergänzende Hinweise bereitzustellen, beispielsweise zur Verwendung der Farbe oder zu zulässigen Farbwerten. - Verwenden Sie bei einer festen oder stark eingeschränkten Farbauswahl stattdessen eine Select- oder Radio-Button-Gruppe mit vordefinierten Farben.
- Geben Sie Validierungsfehler über
_msgaus und beschreiben Sie verständlich, wie Nutzende den Fehler beheben können.
Anwendungsfälle
- Auswahl einer Primär- oder Sekundärfarbe in Konfigurationsoberflächen
- Festlegen von Hintergrund-, Text- oder Akzentfarben
- Anpassung von Design- oder Theme-Einstellungen
- Konfiguration individueller Farbprofile oder Farbschemata
- Farbwahl in Formularen oder Administrationsoberflächen
FAQ
Welche Farbwerte unterstützt die Komponente?
Das Eingabefeld der Komponente unterstützt die Eingabe von HEX-Farbwerten. Der native Farbwahldialog des Browsers kann – abhängig von Browser und Betriebssystem – zusätzliche Eingabemöglichkeiten wie RGB oder HSL bereitstellen.
Wie kann ich eine Farbe vorbelegen?
Ja. Über _value können Sie einen hexadezimalen Farbwert als Ausgangswert festlegen.
Kann ich die Farbauswahl als Pflichtfeld kennzeichnen?
Aktuell unterstützt die Komponente kein _required. Ob eine Farbauswahl verpflichtend ist, muss durch die Anwendung validiert und über _msg kommuniziert werden.
Warum sieht der Farbwahldialog je nach Browser unterschiedlich aus?
Die Komponente verwendet den nativen Farbwahldialog des Browsers. Dessen Darstellung, Bedienung und Funktionsumfang werden durch Browser und Betriebssystem bestimmt und können daher je nach Plattform variieren.
Konstruktion / Technik
Playground
Testen Sie die verschiedenen Eigenschaften der InputColor-Komponente:
<KolInputColor _label="Hintergrundfarbe" _value="#d4fcf4" />Funktionalitäten (mit Code)
Basis-Konfiguration
Die Komponente mit Beschriftung, wahlweise mit Tooltip-Stil:
<KolInputColor _label="Wählen Sie eine Farbe" _value="#d4fcf4" />Mit voreingestelltem Wert
Farbfeld mit einer Standard-Farbe:
<KolInputColor _label="Ihre Farbe" _value="#ff6b6b" />Mit Hinweis und Icons
Farbfeld mit zusätzlichem Hinweistext und grafischen Symbolen:
<KolInputColor _hint="Wählen Sie eine Farbe für Ihr Design" _icons={{ "left": "fa-solid fa-palette" }} _label="Primärfarbe" _value="#d4fcf4" />Deaktiviert und Nur-Lesen
Deaktiviertes Eingabefeld (nicht fokussierbar und nicht veränderbar):
<KolInputColor _disabled={true} _label="Gespeicherte Farbe" _value="#3498db" />Mit Fehlermeldung
Farbfeld mit Validierungsmeldung:
<KolInputColor _label="Farbe auswählen" _msg="Bitte wählen Sie eine gültige Farbe aus." _value="#d4fcf4" />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 | Wert wird durch Eingabe geändert | Aktueller Farbwert des Eingabefelds |
change | Eingabe wurde abgeschlossen | Aktueller Farbwert des Eingabefelds |
API
Overview
The Color input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.
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 |
_autoComplete | _auto-complete | Defines whether the input can be auto-completed. | string | undefined | 'off' |
_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 |
_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, "_on" | "_label" | "_level" | "_variant" | "_hasCloser"> & { _description: string; } | string | undefined | undefined |
_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 & InputTypeOnKeyDown | 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 |
_smartButton | _smart-button | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | undefined | { _label: string; } & { _type?: "button" | "reset" | "submit" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; } | undefined |
_suggestions | _suggestions | Suggestions to provide for the input. | W3CInputValue[] | string | 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 element. | string | undefined | undefined |
_variant | _variant | Defines which variant should be used for presentation. | string | undefined | undefined |
Methods
click
click() => Promise<void>
Clicks the primary interactive element inside this component.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
getValue() => Promise<string | undefined>
Returns the current value.
Returns
Type: Promise<string | undefined>
Slots
| Slot | Description |
|---|---|
| The label of the input field. |