Playground

Verwende <Label />, um ein Label anzuzeigen. Labels werden häufig innerhalb von anderen Komponenten eingesetzt.

import Label from "@mittwald/flow-react-components/Label";

<Label>Label</Label>

States

Das Label hat 2 verschiedene States: Default und Disabled.

import Label from "@mittwald/flow-react-components/Label";

<Row>
  <Label>Default</Label>
  <Label isDisabled>Disabled</Label>
</Row>

Disabled: Das Label wird häufig zur Beschreibung komplexerer Komponenten verwendet. Daher übernimmt es automatisch den State, den die höhere Komponente hat. Ist zum Beispiel ein TextField oder NumberField gerade disabled, nimmt das Label den gleichen State an.

Grundlagen

Best Practices

• Halte Labels kurz (1-3 Wörter) und prägnant.
• Stelle sicher, dass das Label jederzeit vollständig sichtbar ist.
• Verwende eine einfache Sprache.

Verwendung

Verwende ein Label, um ...

• die Eingabeanforderungen an Komponenten innerhalb von Formularen (z.B. TextField, NumberField, RadioGroup, ...) zu erläutern.
• eine Information in Kontext zu setzen, z.B. beim LabeledValue.

Writing Guidelines

Das Label sollte ...

• kurz (1-3 Wörter), prägnant und leicht verständlich sein.
• jederzeit vollständig sichtbar und einzeilig sein. Bei sehr schmalen Bildschirmen kann es passieren, dass es zweizeilig wird.
• keine Verben wie „eingeben“, „hinzufügen“ oder „wählen” enthalten.
• keine Formatierungshinweise geben. Nutze dafür z.B. die FieldDescription im TextField.
• keinen Doppelpunkt am Ende haben.