# Templates

The Templates feature in Filter allows you to choose and customize the style of your filters, offering a range of built-in templates and customization options. This guide details the various options available for selecting and modifying templates in your filters.

## **Choose the Filter Style**

Select the visual style for your filters:

1. **List**: Displays the filters as a simple list, ideal for a clean, straightforward presentation.
2. **Check Box**: Filters are shown with checkboxes, allowing for multiple selections at once.
3. **Radio**: Filters are displayed with radio buttons, suitable for single selection scenarios.

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FPbQFlNxqTbnUO3q7xavW%2Fimage.png?alt=media&#x26;token=cae4ef50-fec1-4549-a5bb-95c5a1fedb8d" alt=""><figcaption></figcaption></figure>

## **Default Templates**

The Default Templates section provides a selection of pre-designed templates that are ready to use. These templates are categorized into two themes: Light and Dark.

* **Default – Light**: Choose from the following color themes:

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2F7i0b3VI6HJD32NLQ4c5E%2FVSM0F5hzEL.png?alt=media&#x26;token=fe5d9427-6778-4577-b187-1731b618fc9c" alt="" width="375"><figcaption></figcaption></figure>

1. Blue
2. Grey
3. Green
4. Yellow
5. Orange
6. Purple

* **Default – Dark**: Choose from the following color themes:

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FPPJiIUwQpruEQPMTgDhh%2FHaeITxtwRK.png?alt=media&#x26;token=f346a14e-da20-4107-b824-ff1e146ca8e0" alt="" width="371"><figcaption></figcaption></figure>

1. Blue
2. Grey
3. Green
4. Yellow
5. Orange
6. Purple

## **Edit Template**

The Edit Template section allows you to customize and modify the selected template to suit your specific needs.

* **Change Template**: Click on this option to select and apply a different template from the available list.
* **Template Preview**: This section displays a live preview of the changes you make to the filter design, allowing you to see the effects in real-time.

## **Global Styles**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2F5kHK573FTQ0kTf2dUedm%2F3Rjr96pnmM.png?alt=media&#x26;token=90ae8d05-74ca-4aa7-9726-3343ca64856d" alt="" width="280"><figcaption></figcaption></figure>

Customize the overall look and feel of your template using the following options:

* **Primary**: Controls the color of the selected checkbox/radio icon and the progress bar fill.
* **Secondary**: Controls the color of the "List" tick mark.
* **Text Color (Default)**: Change the color of all text in the visual.
* **Text Color (Selected)**: Controls the color of text when you select or hover over a row.
* **Row Background (Default)**: Sets the background color of rows.
* **Row Background (Selected)**: Sets the background color of rows when you hover over or select them.
* **Progress Bar Color**: Sets the bar color of the "Progress Bar."

#### **Other Colors**

Further refine the appearance of your filter with these additional color settings:

* **All Borders**: Controls the color of all borders and cell dividers.
* **Title Bar Background**: Controls the background color of the title bar.
* **Title Bar Icons (Default)**: Controls the default color of icons in the title bar.
* **Title Bar Icons (Selected)**: Controls the color of icons during hover or selection.
* **Title Bar Icon Size**: Adjust the size of the icons in the title bar.
* **Font Family**: Choose the font family for the text in the template.

## **Custom Themes**

The Custom Themes section offers a selection of 10 professionally curated filter templates. These templates are designed to provide a polished look and feel right out of the box.

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FKuZKg5AzQ5d3dNYYPiFx%2FMKpJo2ysi8.png?alt=media&#x26;token=c6c6c31f-4497-40e6-b105-d11c1ac246bb" alt="" width="369"><figcaption></figcaption></figure>