# PatientCard.Name

Canonical page: https://docs.ovok.com/native-sdk/guide/components/patient/patient-name

A text component for displaying patient names with configurable formatting options. Built to work with FHIR `HumanName` resources and provides intelligent fallbacks for missing or incomplete name data in healthcare applications.

### Basic Example [#basic-example]

```typescript
import { PatientCard } from "@ovok/native";
import * as React from "react";

const BasicPatientName: React.FC = () => {
  return <PatientCard.Name name={[{ given: ["John"], family: "Doe" }]} />;
};

export default BasicPatientName;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/patient` API reference](/native-sdk/reference/patient).

## Component Behavior [#component-behavior]

### Name Formatting [#name-formatting]

- **firstLast**: "John Michael Doe" format (given names followed by family name)
- **lastFirst**: "Doe, John Michael" format (family name followed by given names)
- **Multiple Given Names**: Automatically joins multiple given names with spaces
- **Missing Data Handling**: Gracefully handles missing given or family names

### Fallback Logic [#fallback-logic]

1. Uses the first `HumanName` object from the array
2. Falls back to "Unknown Patient" for completely missing names
3. Shows only available name parts when some fields are missing
4. Returns empty display for invalid or empty name objects

### FHIR Compliance [#fhir-compliance]

- Fully compatible with FHIR R4 `HumanName` structure
- Supports `given` and `family` name components
- Handles arrays of given names appropriately
- Ignores FHIR `use`, `text`, and other metadata fields

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.onSurface` - Primary text color for patient names
- `theme.fonts.headlineSmall` - Typography scale for prominent name display