> ## Documentation Index
> Fetch the complete documentation index at: https://docs.clinikapi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# VitalsWidget

> Vital signs recording widget with heart rate and blood pressure input.

# VitalsWidget

Records patient vital signs as FHIR Observation resources. Supports heart rate, blood pressure, and other vital measurements with validation.

## Usage

```tsx theme={null}
import { VitalsWidget } from '@clinikapi/react';

<VitalsWidget
  proxyUrl="/api/clinik"
  patientId="pt_abc123"
  theme="light"
/>
```

## Props

| Prop        | Type                | Required | Description       |
| ----------- | ------------------- | -------- | ----------------- |
| `proxyUrl`  | `string`            | Yes      | Backend proxy URL |
| `patientId` | `string`            | Yes      | Patient ID        |
| `theme`     | `'light' \| 'dark'` | No       | Color theme       |

## Form Fields

| Field          | Validation      | FHIR Mapping                                                   |
| -------------- | --------------- | -------------------------------------------------------------- |
| Heart Rate     | 20-250 bpm      | Observation (LOINC 8867-4)                                     |
| Blood Pressure | Required format | Observation (LOINC 85354-9) with systolic/diastolic components |

## Supported Observation Fields

The widget creates observations using the enriched Observation schema:

* `status` — always `final`
* `code` — LOINC vital sign code
* `patientId` — patient reference
* `category` — `vital-signs`
* `valueQuantity` — numeric value with unit
* `component` — for multi-component observations (e.g. BP systolic/diastolic)
* `interpretation` — H (high), L (low), N (normal)
* `referenceRange` — normal reference ranges
* `effectiveDateTime` — when the measurement was taken
* `issued` — when this version was made available

## Proxy Action

The widget sends `observations.create` with:

```json theme={null}
{
  "action": "observations.create",
  "data": {
    "patientId": "pt_abc123",
    "status": "final",
    "code": { "system": "http://loinc.org", "code": "8867-4", "display": "Heart rate" },
    "category": "vital-signs",
    "valueQuantity": { "value": 72, "unit": "bpm" },
    "effectiveDateTime": "2025-01-15T10:00:00Z"
  }
}
```