DocumentList

Composable list for displaying files and documents with icons, titles, metadata, and actions; supports optional multi-select via selectable. Import from "@desk/ui/components/document-list".

Technical Specification.pdf
2.4mb
Care & Maintenance.pdf
1.2mb
Warranty.pdf
340kb

Usage

import { DocumentList, DocumentListAction, DocumentListCheckbox, DocumentListContent, DocumentListContextValue, DocumentListDescription, DocumentListIcon, DocumentListItem, DocumentListItemProps, DocumentListMeta, DocumentListProps, DocumentListSelectAll, DocumentListTitle, useDocumentListContext } from "@desk/ui/components/document-list";

Best practices

Fill it with DocumentListItem children — the root is a <ul> provider; each item's value is what value/defaultValue selection matches against.
Set selectable to reveal per-item checkboxes and drive selection via value/onValueChange (a string[]) — don't add your own checkboxes.
Use this for files/documents with icon + metadata + actions; for a generic single-line row reach for Item/ItemGroup, and for tabular columns use Table.

Props

DocumentList

Prop	Type	Default	Description
defaultValue	`string[] \| undefined`		Default selection value (uncontrolled)
onValueChange	`((value: string[]) => void) \| undefined`		Callback when selection changes
ref	`React.Ref<HTMLUListElement>`
selectable	`boolean \| undefined`	`false`	Enable selection mode; checkboxes appear automatically.
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| undefined`		Size scale for items
value	`string[] \| undefined`		Controlled selection value
variant	`"grouped" \| "divided" \| "separated" \| null \| undefined`

DocumentListCheckbox

Prop	Type	Default	Description
value	`string`		Override the value from item context
size	`ResponsiveSize`	`"xs"`	Checkbox size — a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.
indeterminate	`boolean \| undefined`		When true, displays an indeterminate state (dash icon). This is syntactic sugar for checked="indeterminate".

DocumentListIcon

Prop	Type	Default	Description
icon(required)	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`

DocumentListItem

Prop	Type	Default	Description
asChild	`boolean`
value	`string`		Value for selection tracking (required when selectable is enabled on parent)

DocumentListSelectAll

Prop	Type	Default	Description
label	`string`		Label to show, defaults to "Select all"
size	`ResponsiveSize`	`"xs"`	Checkbox size — a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.

Also exports

componentDocumentListAction
componentDocumentListContent
interfaceDocumentListContextValue
componentDocumentListDescription
interfaceDocumentListItemProps
componentDocumentListMeta
interfaceDocumentListProps
componentDocumentListTitle
constuseDocumentListContext

Composition

Builds on

Checkbox, Icon