> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ws-page-size-selector

> ws-page-size-selector lets customers choose the number of hits per page and automatically updates the search result and pagination.

The `<ws-page-size-selector>` component lets you choose the number of hits displayed per page. It can be used on the search result page as well as on category pages. By default the presentation is a dropdown list.

## Component

The component can be embedded as follows on the category and search result page:

**Select mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector
  mode="select"
  options='[16, 32, 48]'
  class="bsp class xyz"
  select-class="form-select">
</ws-page-size-selector>
```

**Button mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector
  id="sizeBtn"
  mode="button"
  class="bsp class xyz"
  btn-class="button xyz"
  options='[16, 32, 48]'>
</ws-page-size-selector>
```

* **Attributes:**
  * `options`: List of available options for the number of hits per page (e.g. `[16, 32, 48, 64, 80]`).
  * `class`: Lets you assign a class to the element itself.
  * `mode`: Specifies how the presentation should be rendered.
    * `select`: Rendered as a dropdown list.
      * `select-class`: Class for the generated select element.
    * `button`: A "Show more" button without paging.
      * `label`: Text displayed on the button.
      * `btn-class`: Class for the button.

The component generates the following source code:

**Select mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector type="dropdown" default="16" options="[16, 32, 48, 64, 80]" style="display: block;">
    <select>
        <option value="16" selected="">16</option>
        <option value="32">32</option>
        <option value="48">48</option>
        <option value="64">64</option>
        <option value="80">80</option>
    </select>
</ws-page-size-selector>
```

**Button mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector mode="button" btn-class="btn-example-class" label="Load more items">
  <button type="button" class="btn-example-class">
    Load more items
  </button>
</ws-page-size-selector>
```

## CSS & styling

This component does not generate any specific CSS classes. Styling can, however, be adjusted through additional CSS in the shop template.

No further HTML elements can be inserted inside the component.