Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Label

Synonyme: Beschriftung, Kennzeichnung, Bezeichnung
Ähnliche Komponenten: Body

Kurzbeschreibung​

Ein Label dient der Beschriftung interaktiver Elemente und macht deren Funktion klar verständlich.

Beispiele​

Varianten​

Code anzeigen
<p class="kern-label kern-label--large">Dieses Label ist in der Größe „large" dargestellt. Es eignet sich für hervorgehobene Eingabebereiche oder komplexere Formularstrukturen.</p>
<p class="kern-label">Dieses Label ist in der Größe „default" dargestellt. Es dient der eindeutigen Beschriftung von Eingabe- oder Auswahlfeldern und sollte standardmäßig verwendet werden.</p>
<p class="kern-label kern-label--small">Dieses Label ist in der Größe „small" dargestellt. Es wird verwendet, wenn wenig Platz zur Verfügung steht – z.&#8239;B. in Cards. Aufgrund der geringeren Lesbarkeit sollte diese Variante nur sparsam eingesetzt werden.</p>

Beschreibung​

Label ist eine Textkomponente zur Beschriftung interaktiver Elemente. Sie stellt sicher, dass Nutzende Formulareingaben, Buttons oder Kontrollfelder schnell und eindeutig zuordnen können. Ein Label besteht aus einem kurzen, beschreibenden Text. Sie sollten klar, kurz und verständlich formuliert sein – idealerweise in wenigen Worten. Labels stehen dabei stets oberhalb oder – bei Checkboxen und Radios – rechts neben dem zugehörigen Element. Labels gibt es in den Größen „small“, „default“ und „large“. Der Stil ist funktional, klar lesbar und bewusst zurückhaltend gestaltet, um anderen Elementen wie Eingabefeldern nicht die visuelle Priorität zu nehmen.

Verwendungsregeln​

Verwende label-default, um Eingabefelder, Auswahlfelder (z. B. Select, Checkbox, Radio) oder interaktive Schaltflächen eindeutig zu beschriften. Die Größe label-large eignet sich für besonders hervorgehobene Eingabebereiche oder in komplexeren Formularstrukturen.
label-small wird genutzt, wenn wenig Platz zur Verfügung steht oder zusätzliche Felder z. B. in Dialogen oder mobilen Ansichten beschriftet werden müssen. Da kleinere Schriftgrößen schwerer lesbar sind, sollte dieser Stil nur gezielt und sparsam eingesetzt werden.

Dos und Don’ts​

  • Formuliere Labels klar, präzise und selbsterklärend – zum Beispiel „E-Mail-Adresse“ statt „Eingabe“.
  • Beschrifte jedes interaktive Element (z. B. Eingabefeld oder Button) mit einem passenden Label.
  • Positioniere das Label in der Regel oberhalb des zugehörigen Elements. In Ausnahmefällen – etwa bei kompakten UI-Varianten – kann es auch innerhalb stehen.
  • Halte Labels möglichst kurz, sodass sie gut in einer Zeile erfassbar sind.
  • Gestalte Labels nicht selbst durch manuelle Style-Anpassungen. Nutze stattdessen die vorgesehenen Varianten.
  • Setze Labels nicht für erklärende Texte oder längere Hinweise ein – nutze hierfür die Textkomponente Body.

Barrierefreiheit​

Diese Komponente erfüllt die formalen Anforderungen – Schriftgröße, Kontrastverhältnis und Textverständlichkeit.

  • Labels müssen eindeutig, kurz und verständlich formuliert sein – insbesondere für Menschen mit kognitiven Einschränkungen.
  • Jedes Label muss programmatisch mit dem zugehörigen Steuerelement verknüpft sein, z. B. durch das for-Attribut in HTML (<label for="id">) oder über aria-labelledby.
  • Labels müssen bei einer Bildschirmbreite von 320 px vollständig ohne horizontales Scrollen lesbar bleiben.
  • Sie müssen bis auf 200% vergrößerbar sein, ohne dass Inhalte abgeschnitten oder überlagert werden.
    • Hinweis 1: Vertikales Scrollen ist bei Vergrößerung zulässig, horizontales nicht.
    • Hinweis 2: Die Zoomfunktion kann entweder vom System oder durch eigene Mechanismen bereitgestellt werden.

Inhaltsverzeichnis