Label

Ein Label erläutert Eingabeanforderungen in Formularen.

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‍.

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.

DefaultDisabled

Property	Type	Default	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.

Property	Type	Default	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.