# Label

Labels werden in Formularen (z. B. TextField, NumberField) oder beim LabeledValue verwendet. Dort erläutern sie die Eingabeanforderungen oder setzen Informationen in einen Kontext.

## Guidelines

# 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](/04-components/form-controls/text-field/overview),
  [NumberField](/04-components/form-controls/number-field/overview),
  [RadioGroup](/04-components/form-controls/radio-group/overview), ...) zu
  erläutern.
- eine Information in Kontext zu setzen, z. B. beim
  [LabeledValue](/04-components/content/labeled-value/overview).

**ℹ️ Info**

Das Label wird z. B. beim
[TextField](/04-components/form-controls/text-field/overview),
[LabeledValue](/04-components/content/labeled-value/overview) oder
[Switch](/04-components/form-controls/switch/overview) verwendet.

```tsx
import {
  ColumnLayout,
  Header,
  Heading,
  Label,
  LabeledValue,
  Section,
  Switch,
  Text,
  TextField,
} from "@mittwald/flow-react-components";

<Section>
  <Header>
    <Heading>Cronjob</Heading>
    <Switch>Aktiviert</Switch>
  </Header>
  <ColumnLayout l={[1, 1]}>
    <TextField>
      <Label>Beschreibung</Label>
    </TextField>
    <LabeledValue>
      <Label>Nächste Ausführung</Label>
      <Text>10.06.2024 um 09:25 Uhr</Text>
    </LabeledValue>
  </ColumnLayout>
</Section>
```

---

# 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](/04-components/form-controls/text-field/overview).
- keinen Doppelpunkt am Ende haben.

  

**✅ Do**

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

<>
  <Label>Vorname</Label>
  <Label>E-Mail</Label>
  <Label>Verknüpfte App</Label>
  <Label>Datenbankbenutzer</Label>
</>
```

  

**⛔️ Don't**

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

<>
  <Label>Bitte gib deinen Vornamen ein</Label>
  <Label>E-Mail (name@mail.de)</Label>
  <Label>
    Mit welcher App ist die Datenbank verknüpft?
  </Label>
  <Label>Datenbankbenutzer:</Label>
</>
```