InputColor

Synonyme: Farbeingabefeld, Farbauswahl, Farbwähler, Color Input, Color Picker

Beschreibung: Mit InputColor kann eine Farbe über den Farbwähler des Browsers ausgewählt werden.

Die Komponente basiert auf dem nativen HTML5-Eingabetyp color und profitiert dadurch von dessen Semantik sowie der Unterstützung durch Browser und assistive Technologien.

Das Farbfeld zeigt die aktuell gewählte Farbe an. Per Klick oder Tastatur öffnet sich der Farbwähler des Browsers bzw. Betriebssystems, dessen Darstellung und Funktionsumfang von der Plattform abhängen.

Beispiel

Einfaches Farbfeld mit Beschriftung und voreingestellter Farbe:

<KolInputColor _label="Lieblingsfarbe" _value="#d4fcf4" />

Barrierefreiheit

• Das Eingabefeld muss mit einer aussagekräftigen Beschriftung versehen werden. Es darf visuell ausgeblendet werden, wenn der Zweck des Eingabefeldes durch den direkten visuellen Kontext absolut unmissverständlich ist.

• Im Fehlerfall wird die Fehlermeldung direkt an der Komponente dargestellt und automatisch mit ihr verknüpft, sodass sie auch assistiven Technologien zur Verfügung steht.

• Der native Farbwähler weist in Kombination mit Screenreadern bekannte Barrieren auf. So wird das Feld teilweise nicht als Eingabefeld angesagt, und eine Farbauswahl im Dialog ist mit Screenreadern nicht zuverlässig möglich. Da der Dialog vom Browser bzw. Betriebssystem bereitgestellt wird, kann KoliBri dies nicht beeinflussen. Details finden Sie unter .

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.
Kein eigener Farbwähler und kein zusätzliches Textfeld	Die Farbauswahl erfolgt ausschließlich über den nativen Dialog des Browsers bzw. Betriebssystems. Tastatur- und Screenreader-Unterstützung des Dialogs hängen daher von der jeweiligen Plattform ab.
Übernahme des Browser-Standardwerts	Ist kein _value gesetzt, übernimmt die Komponente nach dem Laden den Standardwert des nativen Farbfelds (#000000), sodass Anzeige und Wert der Komponente übereinstimmen.

Links und Referenzen

Verwendung

• Legen Sie die vorausgewählte Farbe über _value fest. Verwenden Sie dafür das Format #rrggbb (z. B. #d4fcf4).
• KoliBri übergibt _value unverändert an das native Farbfeld. Andere Schreibweisen wie #fff oder Farbnamen werden vom Browser in der Regel nicht übernommen und durch #000000 ersetzt.
• Ist kein _value gesetzt, wird der Standardwert des Browsers (#000000) verwendet.
• Die Komponente unterstützt weder _required noch _readOnly. Ob eine Farbauswahl verpflichtend ist, muss durch die Anwendung validiert und über _msg kommuniziert werden.

Tastatursteuerung

Die Tastaturbedienung wird durch den Browser und das Betriebssystem bestimmt. Daher können sich einzelne Tastaturfunktionen je nach Browser und Endgerät unterscheiden.

Typischerweise werden folgende Funktionen unterstützt:

Taste	Funktion
Tab	Fokus auf das Farbfeld bzw. das nächste fokussierbare Element setzen.
Shift+Tab	Fokus auf das vorherige fokussierbare Element setzen.
Enter / Leertaste	Farbwähler öffnen, wenn das Farbfeld fokussiert ist.
Esc	Geöffneten Farbwähler schließen.

Die Bedienung innerhalb des geöffneten Farbwählers wird vollständig durch den Browser bzw. das Betriebssystem bestimmt.

Best Practices / Empfehlungen

• Verwenden Sie eine aussagekräftige Beschriftung (_label), damit Nutzende erkennen, wofür die Farbe verwendet wird (z. B. „Primärfarbe“ oder „Hintergrundfarbe“).
• Verzichten Sie möglichst auf _hideLabel, da einige Screenreader die Beschriftung des nativen Farbfelds nicht zuverlässig ausgeben.
• Nutzen Sie _hint, um ergänzende Hinweise bereitzustellen, beispielsweise zur Verwendung der Farbe oder zu Kontrastanforderungen.
• Ist nur eine begrenzte Anzahl an Farben zulässig, verwenden Sie stattdessen eine Auswahl vordefinierter Farben, beispielsweise mit oder . Beschreiben Sie die Farben dabei zusätzlich in Textform (z. B. „Dunkelblau“).
• Geben Sie Validierungsfehler über _msg aus 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?
Der Wert wird im Format #rrggbb übergeben und zurückgeliefert. Der native Farbwähler des Browsers kann – abhängig von Browser und Betriebssystem – weitere Eingabemöglichkeiten wie RGB oder HSL anbieten; der Wert der Komponente bleibt davon unberührt.

Wie kann ich eine Farbe vorbelegen?
Übergeben Sie über _value einen hexadezimalen Farbwert im Format #rrggbb als Ausgangswert.

Gibt es ein Textfeld für die direkte Eingabe von HEX-Werten?
Nein. Bis Version 4.3 bestand die Komponente zusätzlich aus einem Textfeld für HEX-Werte. Seit Version 4.4 wird ausschließlich das native Farbfeld verwendet.

Kann ich die Farbauswahl als Pflichtfeld kennzeichnen?
Nein, die Komponente unterstützt kein _required. Ob eine Farbauswahl verpflichtend ist, muss durch die Anwendung validiert und über _msg kommuniziert werden.

Warum sieht der Farbwähler je nach Browser unterschiedlich aus?
Die Komponente verwendet den nativen Farbwähler des Browsers. Dessen Darstellung, Bedienung und Funktionsumfang werden durch Browser und Betriebssystem bestimmt.

Playground

Testen Sie die verschiedenen Eigenschaften der InputColor-Komponente:

Icons

Message

<KolInputColor _label="Hintergrundfarbe" _value="#d4fcf4" />

Funktionalitäten

Einfaches Eingabefeld

Jedes Feld benötigt mindestens ein Label (_label), um für alle Nutzenden verständlich und zugänglich zu sein. Das Label wird als natives label-Element mit dem Feld verknüpft.

<KolInputColor _label="Wählen Sie eine Farbe" _value="#d4fcf4" />

Formularattribute

Mit den folgenden Properties passen Sie das Feld an gängige Formularanforderungen an:

• _disabled: Deaktiviert das Feld. Deaktivierte Felder sind nicht fokussierbar und können nicht bearbeitet werden (mit Bedacht verwenden!).

Die Property wird 1:1 auf das gleichnamige native HTML-Attribut des input-Elements übertragen.

<KolInputColor _disabled={true} _label="Gespeicherte Farbe" _value="#3498db" />

Vorbelegter Farbwert

Mit _value legen Sie die vorausgewählte Farbe im Format #rrggbb fest.

<KolInputColor _label="Akzentfarbe" _value="#ff6b6b" />

Hinweistexte und Fehlermeldungen

Mit _hint und _msg geben Sie Nutzenden zusätzliche Orientierung zur Eingabe und machen Validierungsfehler unmittelbar am Feld sichtbar:

• _hint: Ergänzende Hinweise zur Eingabe (wird immer angezeigt und über aria-describedby mit dem Feld verknüpft)
• _msg: Fehlermeldungen oder Validierungshinweise (wird nur in Verbindung mit _touched angezeigt)
• _touched: Zeigt an, ob das Feld von Nutzenden bereits angefasst wurde, und steuert damit, ob _msg sichtbar wird
• _hideMsg: Unterdrückt die Fehlermeldung am Feld, wenn sie an anderer Stelle dargestellt wird

Hinweis: _msg wird erst dann eingeblendet, wenn _touched auf true gesetzt ist. So werden Validierungsfehler nicht bereits beim ersten Rendern, sondern erst nach einer Interaktion mit dem Feld angezeigt. Handelt es sich um eine Fehlermeldung, wird das Feld zusätzlich über aria-invalid als ungültig gekennzeichnet.

Anwendungsfall für _hideMsg: Besteht eine fachliche Einheit aus mehreren Eingabefeldern innerhalb eines Field-Sets, beispielsweise ein sechsstelliger Bestätigungscode mit einem einzelnen Feld je Stelle, kann eine gemeinsame Fehlermeldung für die gesamte Gruppe sinnvoller sein als eine Meldung je Einzelfeld. In diesem Fall unterdrücken Sie die Fehlermeldung an den einzelnen Feldern über _hideMsg und stellen sie stattdessen einmalig am Field-Set dar.

Wichtig: _hideMsg blendet die Fehlermeldung nicht nur visuell aus. Die Meldung wird weder gerendert noch über aria-describedby mit dem Feld verknüpft – lediglich die Kennzeichnung über aria-invalid bleibt erhalten. Stellen Sie daher sicher, dass die gemeinsame Fehlermeldung auf Anwendungsebene für alle Nutzenden, auch für Nutzende assistiver Technologien, wahrnehmbar ist.

Message

<KolInputColor _hideMsg={false} _hint="Achten Sie auf ausreichenden Kontrast zur Hintergrundfarbe." _label="Textfarbe" _msg={{ "_description": "Die gewählte Farbe erreicht keinen ausreichenden Kontrast." }} _touched={true} _value="#d4fcf4" />

Label ausblenden

Mit _hideLabel blenden Sie das Label visuell aus, um das Feld kompakter zu gestalten. Für assistive Technologien bleibt die Beschriftung als zugänglicher Name (aria-label) weiterhin verfügbar; sehende Nutzende erhalten sie bei Maus-Hover und Tastaturfokus als Tooltip.

<KolInputColor _hideLabel={false} _label="Hintergrundfarbe" _value="#d4fcf4" />

Icons

Mit _icons versehen Sie das Feld links und/oder rechts mit zusätzlichen Icons, um visuellen Kontext zu geben.

Verfügbare Positionen sind:

• left: Icon links vom Feld
• right: Icon rechts vom Feld

Wird ein Icon nur über seine Icon-Klasse angegeben, gilt es als dekorativ und wird vor assistiven Technologien verborgen. Trägt ein Icon eine Information, die nicht bereits aus Label oder Hinweis hervorgeht, übergeben Sie es als Objekt mit label – das Icon erhält dann eine zugängliche Beschriftung.

Icons

<KolInputColor _icons={{ "left": "kolicon-kolibri" }} _label="Primärfarbe" _value="#d4fcf4" />

SmartButton

Mit _smartButton platzieren Sie einen Button mit beliebiger Aktion direkt im Eingabefeld, etwa um eine zugehörige Funktion griffbereit anzubieten. Der SmartButton wird immer als Icon-Button ohne sichtbare Beschriftung dargestellt; sein _label dient als zugänglicher Name und muss die Aktion daher eindeutig beschreiben. Der SmartButton ist per Tastatur erreichbar und wird zusammen mit dem Feld deaktiviert (_disabled).

<KolInputColor _label="Mit SmartButton" _smartButton={{ "_label": "Action" }} _value="#d4fcf4" />

Vorschlagswerte (Suggestions)

Mit _suggestions schlagen Sie Nutzenden häufig verwendete Werte vor, um die Eingabe zu beschleunigen. Die Vorschläge werden über das native HTML-Element datalist bereitgestellt. Darstellung und Bedienung der Vorschlagsliste hängen daher vom Browser ab.

Hinweis: In der aktuellen Version werden die Vorschlagswerte bei InputColor nicht angezeigt, da die zugehörige Vorschlagsliste nicht erzeugt wird (siehe ). Das Beispiel zeigt die Konfiguration; die Vorschläge erscheinen erst nach Behebung des Fehlers.

<KolInputColor _label="Markenfarbe" _suggestions={[ "#005ea8", "#e30613", "#ffcc00" ]} _value="#d4fcf4" />

API

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Farbfeld wird angeklickt	-
focus	Farbfeld wird fokussiert	-
blur	Farbfeld verliert Fokus	-
keydown	Taste wird im Farbfeld gedrückt	-
input	Farbe wird im Farbwähler geändert	Aktueller Farbwert im Format #rrggbb
change	Farbauswahl wurde abgeschlossen	Aktueller Farbwert im Format #rrggbb

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
_ariaDetails	_aria-details	References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS).	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.	string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }	undefined
_infoPopover	_info-popover	Defines the informational popover after the label.	any	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; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: VariantClassNamePropType | 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; }	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 | string[] | undefined	undefined

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

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.

---