# Key Value

Definition list of keys and values.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any docs URL. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

```bash
npx shadcn@latest add @angular-pdfcn/forme/key-value
```

To install manually, add the dependencies:

```bash
npm install @formepdf/core @formepdf/shared
```

Then copy these files into your project and update the import paths to match your setup:

- `components/pdf/key-value/key-value.ts`
- `lib/resolve-color.ts`
- `components/pdf/theme-provider.ts`
- `lib/pdf-renderer.ts`
- `lib/pdf-primitives.ts`
- `lib/render.ts`
- `lib/pdf-themes/professional.ts`
- `lib/pdf-themes/primitives.ts`
- `types/pdf-themes.ts`
- `types/pdf-components.ts`

## Usage

```ts
import { Component } from "@angular/core";

import { PdfKeyValue } from "@/components/pdf/key-value/key-value";
import {
  FormeDocument,
  FormePage,
} from "@/lib/pdf-primitives";

@Component({
  imports: [FormeDocument, FormePage, PdfKeyValue],
  template: `
    <forme-document>
      <forme-page size="A4" [margin]="40">
        <pdf-key-value direction="horizontal" divided [items]="items" />
      </forme-page>
    </forme-document>
  `,
})
export class KeyValueDemo {
  protected readonly items = [
    { key: "Invoice #", value: "INV-2026-0042" },
    { key: "Issue Date", value: "15 February 2026" },
    { key: "Due Date", value: "17 March 2026" },
    { key: "Status", value: "Unpaid", valueColor: "destructive" },
    { key: "Total", value: "$4,200.00", valueColor: "primary" },
  ];
}
```

## API Reference

### PdfKeyValue

| Input              | Type                         | Default        |
| ------------------ | ---------------------------- | -------------- |
| `items`            | `KeyValueEntry[]`            | -              |
| `direction`        | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `divided`          | `boolean`                    | `false`        |
| `size`             | `'sm' \| 'md' \| 'lg'`       | `'md'`         |
| `labelFlex`        | `number`                     | `1`            |
| `labelColor`       | `string`                     | -              |
| `valueColor`       | `string`                     | -              |
| `boldValue`        | `boolean`                    | `false`        |
| `noWrap`           | `boolean`                    | `false`        |
| `dividerColor`     | `string`                     | -              |
| `dividerThickness` | `number`                     | -              |
| `dividerMargin`    | `number`                     | -              |