GridList

GridList displays a list of interactive items with support for keyboard navigation and selection. Unlike a simple list, GridList items can contain interactive content and use grid-based arrow key navigation.

Import

import { GridList, GridListItem } from '@proyecto-viviana/solidaria-components';

Basic Grid

A photo gallery grid with single selection. Click an item to select it.

Sunset Beach

Nature

Mountain Range

Nature

City Skyline

Urban

Misty Forest

Nature

Golden Gate

Urban

Alpine Lake

Nature

Sand Dunes

Nature

Clock Tower

Urban

Hidden Falls

Nature

Selected: None

<GridList
  aria-label="Photo gallery"
  items={photos}
  selectionMode="single"
  selectedKeys={selected()}
  onSelectionChange={setSelected}
>
  {(item) => (
    <GridListItem id={item.id} textValue={item.title}>
      <div>{item.title}</div>
      <div>{item.category}</div>
    </GridListItem>
  )}
</GridList>

Multi-Select

A task list with multiple selection enabled. Click items to toggle their selection, or use Shift+Click to select a range.

[~]

Design homepage layout

In Progress

High

[ ]

Write API documentation

Todo

Medium

[~]

Fix login redirect bug

In Progress

High

[ ]

Update dependencies

Todo

Low

[x]

Add unit tests for auth

Done

Medium

[ ]

Optimize database queries

Todo

High

Selected (0): None

<GridList
  aria-label="Task list"
  items={tasks}
  selectionMode="multiple"
  selectedKeys={multiSelected()}
  onSelectionChange={setMultiSelected}
>
  {(item) => (
    <GridListItem id={item.id} textValue={item.title}>
      <span>{item.status}</span>
      <span>{item.title}</span>
      <span>{item.priority}</span>
    </GridListItem>
  )}
</GridList>

GridList Props

Props

Prop	Type	Default	Description
`items`	T[]	—	Data items rendered as grid list entries
`getKey`	(item: T) => Key	—	Function to extract a unique key from each item
`getTextValue`	(item: T) => string	—	Function to extract the text value for typeahead
`selectionMode`	'none' \| 'single' \| 'multiple'	`'none'`	How grid items can be selected
`selectedKeys`	Set<Key> \| 'all'	—	Currently selected item keys (controlled)
`onSelectionChange`	(keys: Set<Key> \| 'all') => void	—	Handler called when selection changes
`disabledKeys`	Iterable<Key>	—	Keys of items that cannot be selected or interacted with
`aria-label`	string	—	Accessible label for the grid list

GridListItem Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique identifier for the grid list item
`textValue`	string	—	Text value used for typeahead and accessibility
`isDisabled`	boolean	`false`	Whether the item is disabled
`children`	JSX.Element \| (renderProps) => JSX.Element	—	Item content, or a render function receiving selection/focus state

Accessibility

Uses role="grid" and role="row" ARIA patterns
Arrow keys navigate between items in the grid
Space or Enter toggles selection on the focused item
Home/End keys jump to first/last item
Shift+Arrow extends selection in multi-select mode
Ctrl+A selects all items in multi-select mode
aria-selected communicates selection state to screen readers
Type-ahead search for quick navigation by text content
Focus management follows the roving tabindex pattern