# Empty value

A muted dash for a missing value in a table, a description list or a detail view, with words for screen readers.

```tsx
import { EmptyValue } from "@zenoxai/ui/patterns/empty-value"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@zenoxai/ui/components/table"

function EmptyValueDemo() {
  const assets = [
    {
      name: "srv-db-01",
      owner: "Platform team",
      lastScan: "10/23/2026 02:00:14",
    },
    { name: "vm-jump-01", owner: null, lastScan: "10/22/2026 02:00:09" },
    { name: "wks-0193", owner: "Marina Santos", lastScan: null },
  ]

  return (
    <Table className="max-w-lg" aria-label="Assets">
      <TableHeader>
        <TableRow>
          <TableHead>Asset</TableHead>
          <TableHead>Owner</TableHead>
          <TableHead>Last scan</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {assets.map((asset) => (
          <TableRow key={asset.name}>
            <TableCell className="font-mono">{asset.name}</TableCell>
            <TableCell>{asset.owner ?? <EmptyValue />}</TableCell>
            <TableCell className="tabular-nums">
              {/* The absence means something here, so it says so. */}
              {asset.lastScan ?? (
                <span className="text-text-muted">Never scanned</span>
              )}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

## Usage

```tsx
import { EmptyValue } from "@zenoxai/ui/patterns/empty-value"

<TableCell>{asset.owner ?? <EmptyValue />}</TableCell>
```

Use it wherever a value can be absent: table cells, [Description List](/patterns/description-list)
items, detail views. A blank cell is ambiguous (no value, still loading, or broken), and "N/A",
"null" or "-" read as data.

When the absence itself means something, write that instead, in `text-text-muted`: "Never
scanned", "No owner", "Not reported by the agent". The "Last scan" column above does.

Pass `label` with the translated text for screen readers; it defaults to "No value".

See [Data display](/guidelines/data-display#empty-values) for the rest of the rules about values.

## Accessibility

- The dash is hidden from assistive technology; screen readers announce `label` instead.
- The dash uses `text-text-muted`, which keeps 4.5:1 on the surface and the muted surface in
  both themes.

## API reference

`import { ... } from "@zenoxai/ui/patterns/empty-value"`

### EmptyValue

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `No value` | Already-translated text screen readers announce instead of the dash. |