# Label

Ein Label erläutert Eingabeanforderungen in Formularen.

```tsx
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](https://flow.mittwald.de/04-components/form-controls/text-field).

---

# 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](https://flow.mittwald.de/04-components/form-controls/text-field) oder
  [NumberField](https://flow.mittwald.de/04-components/form-controls/number-field) gerade **disabled**,
  nimmt das Label denselben State an.

```tsx
import { Label } from "@mittwald/flow-react-components";

<>
  <Label>Default</Label>
  <Label isDisabled>Disabled</Label>
</>
```

---

# Properties

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

### Accessibility

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