Beispiele
Das Label wird z.B. beim TextField, LabeledValue oder Switch verwendet.
Overview
Develop
Guidelines
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>
States
Das Label hat 2 verschiedene States: Default und Disabled.
import { Label } from "@mittwald/flow-react-components"; <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.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
optional | boolean | - | Whether the label should show an "optional" indicator. |
isDisabled | boolean | - | Whether the label should be displayed as disabled. |
unstyled | boolean | - | |
dangerouslySetInnerHTML | { __html: string | TrustedHTML; } | - | |
suppressHydrationWarning | boolean | - | |
className | string | - | |
color | string | - | |
id | string | - | |
lang | string | - | |
style | CSSProperties | - | |
role | AriaRole | - | |
tabIndex | number | - | |
autoFocus | boolean | - | |
defaultValue | string | number | readonly string[] | - | |
slot | string | - | |
elementType | string | - | |
defaultChecked | boolean | - | |
suppressContentEditableWarning | boolean | - | |
accessKey | string | - | |
autoCapitalize | "none" | "off" | (string & {}) | "on" | "sentences" | "words" | "characters" | - | |
contentEditable | Booleanish | "inherit" | "plaintext-only" | - | |
contextMenu | string | - | |
dir | string | - | |
draggable | Booleanish | - | |
enterKeyHint | "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | - | |
hidden | boolean | - | |
nonce | string | - | |
spellCheck | Booleanish | - | |
title | string | - | |
translate | "yes" | "no" | - | |
radioGroup | string | - | |
about | string | - | |
content | string | - | |
datatype | string | - | |
inlist | any | - | |
prefix | string | - | |
property | string | - | |
rel | string | - | |
resource | string | - | |
rev | string | - | |
typeof | string | - | |
vocab | string | - | |
autoCorrect | string | - | |
autoSave | string | - | |
itemProp | string | - | |
itemScope | boolean | - | |
itemType | string | - | |
itemID | string | - | |
itemRef | string | - | |
results | number | - | |
security | string | - | |
unselectable | "off" | "on" | - | |
popover | "" | "auto" | "manual" | - | |
popoverTargetAction | "hide" | "toggle" | "show" | - | |
popoverTarget | string | - | |
inert | boolean | - | @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert |
inputMode | "none" | "text" | "search" | "url" | "tel" | "email" | "numeric" | "decimal" | - | Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute |
is | string | - | Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is |
form | string | - | |
htmlFor | string | - | |
children | ReactNode | - | |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | - | |
ref | Ref<HTMLLabelElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set |
key | Key | - |
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.