> For the complete documentation index, see [llms.txt](https://docs.ardexa.com/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ardexa.com/knowledge/app.ardexa/standard-ui-components.md).

# Standard UI components

Ardexa reuses a number of UI components throughout the app, so it's important to understand how they work and what options are availble to ensure you get the best experience.

## List filter

<figure><img src="/files/3oA0yqtlMqrFmCF2mI9I" alt=""><figcaption></figcaption></figure>

Lists are everywhere in the app and this filter gives you the power to search and select items from the list. By typing text into the <mark style="background-color:green;">Filter</mark> text area, the list will be narrowed to only include items that match the search term. There are two important things to keep in mind:

* Some filters will apply a "fuzzy" search. This means that as long as the letters you type appear *in order*, then the filter will match. For example, if you wanted to find items with the word temperature, you could search for just `tmp`, or `tptr`, as the letters in the search term appear in order, although not adjacent. `trp` would not match, since although the target word contains all the letters, those letters do not appear in order
* Some filters will also search metadata. For example, the filter on the <mark style="background-color:green;">Devices</mark> page will include metadata in the search, so you can easily find devices by their ID or the flie names they are collecting from.

The magnifying glass on the left is a button to toggle the match from "Show matching items" to "Hide matching items".

<figure><img src="/files/VTQmAgbvMwghRsrHl2sA" alt=""><figcaption></figcaption></figure>

There are two variations of the list filter

* Single select list: standard filter
* Multi-select list (pictured above): comes with two additional buttons to <mark style="background-color:green;">deselect all</mark> or <mark style="background-color:green;">select all visible</mark> items, respectively.
