GridList

Interactive list built on React Aria, with keyboard navigation, selection, and row actions. Each item is keyed by id, and those keys are what selection APIs speak in.

import { GridList } from "@pockets-ui/components"

Reach for GridList when rows are a single unit of content. When rows have multiple columns of comparable data, use Table instead.

Basic

Without a selectionMode, items are still focusable and navigable with the arrow keys — useful for a list of links or actions.

Jeans pocket

Jacket pocket

Shirt pocket

Coat pocket

Code

import { GridList } from "@pockets-ui/components"

export default function GridListBasic() {
  return (
    <GridList.Root aria-label="Pockets">
      <GridList.Item id="jeans">Jeans pocket</GridList.Item>
      <GridList.Item id="jacket">Jacket pocket</GridList.Item>
      <GridList.Item id="shirt">Shirt pocket</GridList.Item>
      <GridList.Item id="coat">Coat pocket</GridList.Item>
    </GridList.Root>
  )
}

Single selection

Jeans pocket

Jacket pocket

Shirt pocket

Code

import { GridList } from "@pockets-ui/components"

export default function GridListSingleSelection() {
  return (
    <GridList.Root
      aria-label="Favorite pocket"
      selectionMode="single"
      defaultSelectedKeys={["jacket"]}
    >
      <GridList.Item id="jeans">Jeans pocket</GridList.Item>
      <GridList.Item id="jacket">Jacket pocket</GridList.Item>
      <GridList.Item id="shirt">Shirt pocket</GridList.Item>
    </GridList.Root>
  )
}

Multiple selection

selectionMode="multiple" gives each row a checkbox and enables shift-click and ⌘-click range selection.

Jeans pocket

Jacket pocket

Shirt pocket

Coat pocket

Code

import { GridList } from "@pockets-ui/components"

export default function GridListMultipleSelection() {
  return (
    <GridList.Root
      aria-label="Pockets to sew shut"
      selectionMode="multiple"
      defaultSelectedKeys={["shirt", "coat"]}
    >
      <GridList.Item id="jeans">Jeans pocket</GridList.Item>
      <GridList.Item id="jacket">Jacket pocket</GridList.Item>
      <GridList.Item id="shirt">Shirt pocket</GridList.Item>
      <GridList.Item id="coat">Coat pocket</GridList.Item>
    </GridList.Root>
  )
}

Disabled rows

Jeans pocket

Jacket pocket

Coat pocket (sewn shut)

Code

import { GridList } from "@pockets-ui/components"

export default function GridListDisabledRows() {
  return (
    <GridList.Root
      aria-label="Available pockets"
      selectionMode="multiple"
      disabledKeys={["coat"]}
    >
      <GridList.Item id="jeans">Jeans pocket</GridList.Item>
      <GridList.Item id="jacket">Jacket pocket</GridList.Item>
      <GridList.Item id="coat">Coat pocket (sewn shut)</GridList.Item>
    </GridList.Root>
  )
}

Grid layout

layout="grid" arranges items in a wrapping grid and makes the left/right arrow keys move between columns.

Code

import { GridList } from "@pockets-ui/components"

export default function GridListGridLayout() {
  return (
    <GridList.Root
      aria-label="Pocket gallery"
      layout="grid"
      selectionMode="multiple"
    >
      <GridList.Item id="jeans">Jeans</GridList.Item>
      <GridList.Item id="jacket">Jacket</GridList.Item>
      <GridList.Item id="shirt">Shirt</GridList.Item>
      <GridList.Item id="coat">Coat</GridList.Item>
      <GridList.Item id="vest">Vest</GridList.Item>
      <GridList.Item id="cargo">Cargo</GridList.Item>
    </GridList.Root>
  )
}

Empty state

No pockets yet.

Code

import { GridList } from "@pockets-ui/components"

export default function GridListEmptyState() {
  return (
    <GridList.Root
      aria-label="Empty pockets"
      renderEmptyState={() => "No pockets yet."}
    />
  )
}