# DescriptionList

Related terms and descriptions with native list semantics and responsive grouping.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, DescriptionList } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DescriptionList items={[
        {id:"project",term:"Project",description:"Flood"},
        {id:"version",term:"Version",description:"0.2.4"},
      ]} />
    </FloodRoot>
  );
}
```

## Design notes

- Renders native dl/dt/dd groups. IDs are stable React keys, not generated DOM anchors; require unique nonempty IDs.
- Inline layout becomes stacked when the component container is narrow. Stacked layout is always one column.
- Density and dividers affect presentation. Values may contain React content; the host owns formatting and missing-value text.
- Native dl props, className/style and HTMLDListElement ref target the list. Available in 0.2.4.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `items` | `readonly DescriptionItem[]` | `Required` |
| `layout` | `"inline" \| "stacked"` | `"inline"` |
| `density` | `"compact" \| "comfortable"` | `"compact"` |
| `dividers` | `boolean` | `false` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDListElement>, "children">` | `Forwarded` |