Skip to content
Compositions

DocumentList

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

  • Technical specification.pdf
    2.4 MB
  • Environmental product declaration.pdf
    1.8 MB
  • Care and maintenance.pdf
    1.2 MB
  • Warranty.pdf
    340 KB

Usage

import { DocumentList, DocumentListAction, DocumentListCheckbox, DocumentListContent, DocumentListContextValue, DocumentListDescription, DocumentListIcon, DocumentListItem, DocumentListItemProps, DocumentListMeta, DocumentListProps, DocumentListSelectAll, DocumentListTitle, useDocumentListContext } from "@instruments/materia-ui/compositions/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

PropTypeDefaultDescription
defaultValuestring[] | undefined

Default selection value (uncontrolled)

onValueChange((value: string[]) => void) | undefined

Callback when selection changes

refReact.Ref<HTMLUListElement>
selectableboolean | undefinedfalse

Enable selection mode; checkboxes appear automatically.

size"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined

Size scale for items

valuestring[] | undefined

Controlled selection value

variant"divided" | "separated" | "grouped" | null | undefined

DocumentListCheckbox

PropTypeDefaultDescription
valuestring

Override the value from item context

sizeResponsiveSize"xs"

Checkbox size - a single token or a per-breakpoint object like { base: "sm", md: "lg" }.

DocumentListIcon

PropTypeDefaultDescription
icon(required)LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>

DocumentListItem

PropTypeDefaultDescription
valuestring

Value for selection tracking (required when selectable is enabled on parent)

DocumentListSelectAll

PropTypeDefaultDescription
labelstring

Label to show, defaults to "Select all"

sizeResponsiveSize"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

Center, Checkbox, Flex, Icon