# Display in-app filter choices as chips

**URL:** <https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997>\
**Category:** Ask for Help\
**Created:** [August 30, 2024, 5:12pm UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997 "2024-08-30T17:12:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gannonatwork](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gannonatwork/32/91717_2.png) [@gannonatwork](https://community.glideapps.com/u/gannonatwork)\
**Post date:** [August 30, 2024, 5:12pm UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/1 "2024-08-30T17:12:03Z")

</div>

Is there any way to display in-app filter choices as chips instead of checkboxes? Similar to how we have the styling option to display Choice component items. Looked under feature requests and haven’t seen anything requested yet.

I’ve searched the community and everything I’ve found so far related to filtering with chips has to do with the previous workaround before Glide deployed native in-app filtering. Thx

---

<div class="post-metadata">

**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\
**Post date:** [August 30, 2024, 6:54pm UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/2 "2024-08-30T18:54:20Z")

</div>

Hi

I am afraid not. The in-app filter is very good, and a very quick way of adding filtering - but a lot of people use a choice component (displayed as a chip), and user specific columns to deploy filtering.

Takes more work, but is more customisable

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 31, 2024, 4:49am UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/3 "2024-08-31T04:49:31Z")

</div>

Isn’t using checkboxes simpler and more elegant? Why do you prefer the pill shape?

---

<div class="post-metadata">

**Author:** ![gannonatwork](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gannonatwork/32/91717_2.png) [@gannonatwork](https://community.glideapps.com/u/gannonatwork)\
**Post date:** [August 31, 2024, 10:56am UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/4 "2024-08-31T10:56:38Z")

</div>

Hey, @Andrew_Davies. I appreciate you weighing in on this. I do like to stick to native components on something like this to reduce maintenance; I’ll just keep my fingers crossed that future enhancements might show up in the future. 🤞

---

<div class="post-metadata">

**Author:** ![gannonatwork](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gannonatwork/32/91717_2.png) [@gannonatwork](https://community.glideapps.com/u/gannonatwork)\
**Post date:** [August 31, 2024, 11:00am UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/5 "2024-08-31T11:00:26Z")

</div>

I agree, the checkboxes are simple and do the job. Our testing has shown users prefer the chips in our form screens and have commented that it’s faster/easier to make selections.

That got us to thinking the use of chips/pills in the filtering component, especially where we have several categories of multi-layered filtering to help users winnow down collections.

---

<div class="post-metadata">

**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\
**Post date:** [August 31, 2024, 11:13am UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/6 "2024-08-31T11:13:50Z")

</div>

No worries

That is a sensible approach! I’ve spent hours making things work in a very specific way - only to find GLide adds the feature natively!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 31, 2024, 11:44am UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/7 "2024-08-31T11:44:32Z")

</div>

The following code may not be perfect, especially as it could interfere with other components on the same screen.

 ![Screenshot 2024-08-31 at 15.05.59](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/7/47fe0271e42510ad318bf82e5cb9ff5830d76ce8.png)  

~~

```auto
/* Hide the original checkbox */
#root:has(.pill-filter) #app-modal-root label > div, #root:has(.allCollection) #overlay-scroll label > div {
  display: none;
}
/* Style for the pill-shaped element */
#root:has(.pill-filter) 
.children-container > div{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
/* Style for the pill-shaped element */
#root:has(.pill-filter) .children-container label {
  display: inline-flex;
  align-items: center;  
  background-color: rgba(100,100,100,0.3);
  border-radius: 20px;
  padding: 5px 10px; 
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; 
}

/* Change background color on hover */
#root:has(.pill-filter) .children-container label:hover {
  background-color: rgba(100,100,100,0.5);
}

#root:has(.pill-filter) .children-container label:has(input:checked) {
  background-color: var(--gv-accent);
  color: #fff;
}

```

~~

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 31, 2024, 5:30pm UTC](https://community.glideapps.com/t/display-in-app-filter-choices-as-chips/75997/8 "2024-08-31T17:30:36Z")

</div>

**💡Revision:**  
Use the Title or Group Header Name to isolate the filter from other components, for example, “Names” in this case. So, it’s not about using the class name.

 ![Screenshot 2024-09-01 at 00.33.26](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c1355110e09bf4acb47621e407860ec03eca08e2.png)

```auto
/* Hide the original checkbox */
#root:has([data-testid="filter-group-header-Names"]) #app-modal-root label > div,
#root:has([data-testid="filter-group-header-Names"]) #overlay-scroll label > div {
  display: none;
}

/* Style for the element */
#root:has([data-testid="filter-group-header-Names"]) .children-container > div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* Style for the element */
#root:has([data-testid="filter-group-header-Names"]) .children-container label {
  display: inline-flex;
  align-items: center;  
  background-color: rgba(100,100,100,0.3);
  border-radius: 20px;
  padding: 5px 10px; 
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; 
}

/* Change background color on hover */
#root:has([data-testid="filter-group-header-Names"]) .children-container label:hover {
  background-color: rgba(100,100,100,0.5);
}

#root:has([data-testid="filter-group-header-Names"]) .children-container label:has(input:checked) {
  background-color: var(--gv-accent);
  color: #fff;
}

```