# LabeledValue

Das LabeledValue zeigt eine statische Information mit beschreibendem Label.

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

<LabeledValue>
  <Label>Speicherplatz</Label>
  <Content>20 GB</Content>
</LabeledValue>
```

---

# Best Practices

- Formuliere das [Label](/04-components/content/label) kurz, prägnant und in
  einfacher Sprache, sodass es den Wert eindeutig beschreibt.
- Stelle mehrere LabeledValues in einem
  [ColumnLayout](/04-components/structure/column-layout) nebeneinander dar.
  Setze dabei nicht zu viele Informationen in eine Zeile.
- Sortiere sie nach Wichtigkeit und fasse sie in sinnvolle Gruppen. Ein Beispiel
  ist die Gruppe aus Name und Adresse.

---

# Kombiniere mit ...

Der Content-Bereich des LabeledValue kann einen
[Text](/04-components/content/text), einen InlineCode oder einen Link beinhalten
und jeweils durch einen CopyButton ergänzt werden.

## ColumnLayout

Stelle mehrere LabeledValues in einem
[ColumnLayout](/04-components/structure/column-layout) nebeneinander dar, um
zusammengehörige Informationen wie Name und Adresse zu gruppieren.

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

<ColumnLayout>
  <LabeledValue>
    <Label>Vorname</Label>
    <Content>Max</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Nachname</Label>
    <Content>Mustermann</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Straße</Label>
    <Content>Musterstraße 1</Content>
  </LabeledValue>
  <LabeledValue>
    <Label>Ort</Label>
    <Content>32423 Minden</Content>
  </LabeledValue>
</ColumnLayout>
```

## InlineCode

Mit `<InlineCode />` anstelle von `<Content />` kann ein
[InlineCode](/04-components/content/inline-code) angezeigt werden.

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

<LabeledValue>
  <Label>Datenbankserver</Label>
  <InlineCode>
    mysql-kq3v4g.ge-s-hopovh.db.project.host
  </InlineCode>
</LabeledValue>
```

## Link

Nutze einen `<Link />` anstelle von `<Content />`, um einen
[Link](/04-components/navigation/link) anzuzeigen.

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

<LabeledValue>
  <Label>Server</Label>
  <Link>MyServ-01</Link>
</LabeledValue>
```

## CopyButton

Verwende `<CopyButton />` innerhalb des `<LabeledValue />`, um einen
[CopyButton](/04-components/actions/copy-button) am Ende des Contents
anzuzeigen.

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

<LabeledValue>
  <Label>Short-ID</Label>
  <Content>p-wut3uw</Content>
  <CopyButton text="p-wut3uw" />
</LabeledValue>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |