DataList pairs labels with read-only values in a consistent column layout: incident details, user profiles, integration metadata. It is optimized for vertical scanning: labels align, values wrap predictably, and a value is the component it already is (a status, a badge, a link, a date) rather than a plain string. Dispatch uses it in side panels and overview tabs, where editing happens elsewhere in a dedicated form.
CAD ID
PSA-24-082341
Caller
Morgan Reyes
Address
118 Monroe Ave
Status
Active
Priority
High
Reset zoom to 100%
When to use
Side panels and overview tabs summarizing an object without inline editing.
Mixed-type fields where some values are statuses, badges, secrets, or masked text.
Dense admin surfaces where form controls would imply false editability.
When not to use
Editable settings—use Input, Select, and a form layout.
Homogeneous rows with sortable columns—use Table or DataTable.
Marketing or docs layouts—use typography components or rich text.
Composition
Label column uses short sentence-case nouns or noun phrases; width is tuned once per layout region with labelWidth and reused.
Value column composes the right component inside DataListValue (Badge, Link, Time, StatusDot with text) so semantics surface to assistive tech, not just the eye.
Empty values render EmptyText instead of blank gaps; set emptyLabel so they have a name.
Content guidelines
Localize labels and values via formatMessage when they are user-facing.
Don't repeat the label inside the value ("Status: Active" is noise; a DataListLabel of "Status" with a DataListValue of "Active" is correct).
Behavior and states
Loading. Set loading and loadingLabel on the list, or on one value, so skeleton lines hold the layout instead of flickering placeholders.
Errors. Set error on a value that did not load, and show a Banner when the whole object fails; do not silently omit fields.
Best practices
Do
Tune labelWidth once per region and reuse it across related panels so alignments read as a set.
Compose a StatusDot with text or a Badge instead of color words in plain value strings.
Don't
Cram interactive controls into DataList rows without migrating to a proper form pattern.
Vary label widths row by row—it breaks the scanning model.
Accessibility
Value widgets (badges, secrets) keep their accessible names and state announcements. Long values remain readable at 200% zoom; test wrapping. See Accessibility for the full contract.