atomic-results-per-page

This is for:

Developer

In this article

Introduction
User Experience and Best Practices
Properties
Shadow Parts

The atomic-results-per-page component determines how many results to display per page.

Go to the interactive example

Introduction

The Results Per Page component determines how many results a user wants to display per page.

User Experience and Best Practices

Usage

Depending on if the results are in grid or list view, the user may want to change the number of results per page.
When using the Pager component, place the Results Per Page component below the Pager.

Guidelines

Showing just the right amount of results can be tricky because it varies depending on the use case of the search page. We don’t want to overwhelm the user with too many results, nor underwhelm with too few. Offering this control to a user allows them to determine this level of comfort for themselves.

Reference

Product List UX: The Number of Products to Load by Default (52% Get it Wrong)

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type	Default
`choicesDisplayed`	`choices-displayed`	A list of choices for the number of results to display per page, separated by commas.	`string`	`'10,25,50,100'`
`initialChoice`	`initial-choice`	The initial selection for the number of result per page. This should be part of the `choicesDisplayed` option. By default, this is set to the first value in `choicesDisplayed`.	`number \| undefined`

choicesDisplayed

choices-displayed

A list of choices for the number of results to display per page, separated by commas.

string

'10,25,50,100'

initialChoice

initial-choice

The initial selection for the number of result per page. This should be part of the choicesDisplayed option. By default, this is set to the first value in choicesDisplayed.

number | undefined