# Product Options Toggle

* **Component**: \<ProductTypeToggle/>
* **Path**: /components/home/product-type-toggle.tsx
* **Import**:

```typescript
import { ProductTypeToggle } from "@/components/home/product-type-toggle.tsx";
```

<figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2FhlqmYNJc0pCbmCKDKbAl%2FCapture%20d%E2%80%99%C3%A9cran%202024-06-18%20130834.png?alt=media&#x26;token=11bac1ba-bb5e-4043-b0a0-e21575c8c528" alt=""><figcaption><p>Product Options Toggle</p></figcaption></figure>

This simple Toggle allows users to filter out products depending on the options you defined in your `/data/config/metadata.js` file (*option1Label*)

By default all products are shown regardless of their options. You can modify this behavior by updating `defaultPressed` :

{% code title="product-type-toggle.tsx" %}

```typescript
<Toggle
    value="option1"
    aria-label={`Toggle ${metadata.option1Label}`}
    onClick={() => handleToggle("option1")}
    defaultPressed={selectedProductTypes.includes("option1")}
>
```

{% endcode %}