API and Development
DataList wraps Radix DataList with Prepared styling. Pass items: DataListItem[] where each item declares a label and a typed value (DataListValueKind for text, datetime, badge, icon+text, link, status, etc.). Control layout with orientation (DataListOrientation), trim (DataListTrim), labelMinWidth, mono for monospace plain/text values, and optional emptyValue / emptyLabel for blank cells. Clipboard copy is supported for applicable value kinds via onCopySuccess and alwaysVisibleCopyButtons.
| Name | Type | Default | Description |
|---|---|---|---|
aria-description | LocalizedMessage | — | Extended description for assistive tech. |
aria-label | LocalizedMessage | — | Accessible name when the visible label is insufficient. |
aria-placeholder | LocalizedMessage | — | Hint for an empty control. |
children | ReactNode | — | Pairs: {@link DataListItem } children. |
className | string | — | Classes appended after the generated classes. Put overrides in @layer chroma.overrides. |
copyReveal | DataListCopyReveal | DataListCopyReveal.Hover | When copy buttons are visible. Hover reveals on hover-capable devices and on focus; touch devices always show them. |
density | DataListDensity | DataListDensity.Default | Gap between rows and columns. |
emptyContent | ReactNode | — | Visible placeholder for an empty value, passed to EmptyText as children. Defaults to its em dash. |
emptyLabel | LocalizedMessage | — | Accessible name for an empty value that sets no emptyLabel of its own. |
labelWidth | DataListLabelWidth | DataListLabelWidth.Fit | Width of the shared label column. Ignored in the vertical and inline orientations. |
loading | boolean | — | Replaces every value with a Skeleton text line and marks the list aria-busy.
Not loading. |
loadingLabel | LocalizedMessage | — | Accessible name for each placeholder. Only meaningful while loading. |
mono | boolean | false | Renders values in a monospace role. A value can override it. |
orientation | DataListOrientation | DataListOrientation.Horizontal | Shared label column (Horizontal), label above value (Vertical), or a flowing row of pairs (Inline). |
ref | Ref<HTMLDListElement> | — | Ref to the dl. |
separator | boolean | false | Paints a vertical rule between items when orientation is Inline.
Ignored for Horizontal and Vertical. The list owns the space around the rule. |
title | LocalizedMessage | — | Native tooltip; accessibility hint, not visible UI title text. |
DataListValueKind, DateTimeFormat, BadgeValue, etc.) define each cell payload—import them from @prepared911/ui alongside DataList.