Label
import { Label } from "@mittwald/flow-react-components"; <Label>Label</Label>
Best Practices
- Formuliere das Label kurz, prägnant und in einfacher Sprache, meist ein bis drei Wörter.
- Halte das Label jederzeit vollständig sichtbar und einzeilig.
- Benenne das Feld als Substantiv. Nutze etwa „E-Mail-Adresse“ statt „E-Mail eingeben“.
- Gib Formatierungshinweise über die FieldDescription im TextField.
States
Ein Label hat zwei States:
- Default – das Label wird in seiner Standarddarstellung angezeigt.
- Disabled – das Label beschreibt häufig komplexere Components und übernimmt automatisch deren State. Ist z. B. ein TextField oder NumberField gerade disabled, nimmt das Label denselben State an.
Properties
| Property | Type | Description |
|---|---|---|
children | ReactNode | |
elementType | string | |
isDisabled | boolean | Whether the label should be displayed as disabled. |
optional | boolean | Whether the label should show an "optional" indicator. |
render | DOMRenderFunction<"div", TooltipRenderProps> | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |
Accessibility
| Property | Type | Description |
|---|---|---|
aria-describedby | string | Identifies the element (or elements) that describes the object. @see aria-labelledby |
aria-hidden | Booleanish | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
aria-label | string | Defines a string value that labels the current element. @see aria-labelledby. |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. @see aria-describedby. |