Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← UI patterns

List–Detail

Browse a list while viewing the details of one selected item.

Fieldwork Press · 3 conversations

Studio inbox

Mara · Print studio · 10:42 am

The proof is ready

The first print of the coastal field guide is ready for review. The green ink has a softer finish on the uncoated stock, and the contour lines are holding well.

Please check the fold and the map labels before we start the full run.

Coastal field guide

Selected: The proof is ready

Behavior

Keyboard

Tab
Move among item buttons and detail controls.
Enter / Space
Open the focused item or activate Back to list.
Parts

List pane

The collection and its selected item.

Detail pane

The full content of that item.

Back control

Returns to the list when only one pane fits.

States

Selection

Choosing an item updates the detail pane and marks the current item.

Compact

Show one pane at a time; preserve selection when returning to the list.

No selection

Offer a useful prompt before an item is chosen.

References

A topic list with Android TV selected and its details in a second pane.
Adaptive list–detailAndroid Developers

Use it

Figma
Build the list–detail
  1. Build separate list and detail frames with shared item data.
  2. Create selected and unselected row variants.
  3. Prototype wide and compact views, and annotate where keyboard focus moves on selection and return.
Accessibility

Selection, focus, and the visible pane must stay in sync, especially when a pane disappears.

  1. Give the selected item an accessible current state.
  2. When selection hides the list, move focus into the detail pane; restore focus on return.
  3. Use links for real destinations or buttons for local updates. Do not apply listbox roles without its keyboard model.
Research notes & sources

No dedicated layout role; use a semantic list of controls and a labelled detail region.

  1. Reference image attribution and licensesSource and capture record
  2. Build a list-detail layoutAndroid Developers
  3. Canonical layout examplesGoogle Material Design
  4. Content structureW3C WAI