# DescriptionListItem

> A `dt`/`dd` pair placed straight in the grid, with a placeholder for a missing value.

Source: https://ui.jcsoftdev.com/docs/components/description-list-item

A `dt`/`dd` pair placed straight in the grid, with a placeholder for a missing value.

## Import

```ts
import { DescriptionListItem } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/description-list`.

## Usage

```tsx
<DescriptionListItem>
  <>
          <dt>Cliente</dt>
          <dd>Luis Ramírez</dd>
          <dt>Servicio</dt>
          <dd>Corte + barba</dd>
          <dt>Barbero</dt>
          <dd>Mateo Flores</dd>
          <dt>Hora</dt>
          <dd>Sábado 11:30</dd>
          <dt>Total</dt>
          <dd>S/ 45</dd>
        </>
</DescriptionListItem>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `term` * | `ReactNode` |  |  |
| `children` | `ReactNode` |  | The value. `null`, `undefined`, `false` and `""` render the placeholder instead. |
| `placeholder` | `ReactNode` | `"—"` | Shown for an empty value. Defaults to an em dash. |
| `emptyLabel` | `string` |  | Screen-reader text for an empty value (the placeholder itself is decorative). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/containers-descriptionlist--default)
- [Long Values](/storybook/?path=/story/containers-descriptionlist--long-values)
- [Narrow](/storybook/?path=/story/containers-descriptionlist--narrow)
- [Items With Placeholder](/storybook/?path=/story/containers-descriptionlist--items-with-placeholder)
- [Inline Never Stacks](/storybook/?path=/story/containers-descriptionlist--inline-never-stacks)
- [Auto Stacks When Narrow](/storybook/?path=/story/containers-descriptionlist--auto-stacks-when-narrow)
- [Stacked Always](/storybook/?path=/story/containers-descriptionlist--stacked-always)
- [Two Columns](/storybook/?path=/story/containers-descriptionlist--two-columns)
- [Two Columns Collapse When Narrow](/storybook/?path=/story/containers-descriptionlist--two-columns-collapse-when-narrow)

## Source

`packages/ui/src/containers/description-list/description-list.tsx`