> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Current Filters
> Shows applied refinements and lets users remove them.
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
FlavorSwitcher requires at least one option.
;
}
const selected = options.find(option => option.value === current) ?? options[0];
return ;
};
```kotlin Signature theme={"system"}
FilterCurrentConnector(
filters: Map,
filterState: FilterState,
groupIDs: List
)
```
Browse the Current Filters example code on GitHub.
## About this widget
Shows the currently active [refinements](/doc/api-reference/widgets/refinement-list/android) within a given `FilterState` and lets users remove filters individually.
## Examples
```kotlin Kotlin icon=code theme={"system"}
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = "YourApplicationID",
apiKey = "YourSearchOnlyAPIKey",
indexName = "YourIndexName"
)
private val color = "color"
private val price = "price"
private val tags = "_tags"
private val groupColor = FilterGroupID(color)
private val groupPrice = FilterGroupID(price)
private val groupTags = FilterGroupID(tags)
private val filters = filters {
group(groupColor) {
facet(color, "red")
facet(color, "green")
}
group(groupTags) {
tag("mobile")
}
group(groupPrice) {
comparison(price, NumericOperator.NotEquals, 42)
range(price, IntRange(0, 100))
}
}
val filterState = FilterState(filters)
val currentFiltersColor = FilterCurrentConnector(filterState, listOf(groupColor))
val currentFiltersAll = FilterCurrentConnector(filterState)
val connection = ConnectionHandler(
currentFiltersColor,
currentFiltersAll,
searcher.connectFilterState(filterState)
)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
connection += currentFiltersAll.connectView(
FilterCurrentViewImpl(chipGroupAll, R.layout.filter_chip)
)
connection += currentFiltersColor.connectView(
FilterCurrentViewImpl(chipGroupColors, R.layout.filter_chip)
)
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
searcher.cancel()
connection.disconnect()
}
}
```
### Low-level API
If you want to fully control the Current Filters components and connect them manually, use the following components:
* `FilterCurrentViewModel`. The logic for current refinements in the `FilterState`.
* `FilterState`. The current state of the filters.
* `FilterCurrentView`. The view that renders the current filters.
* `FilterCurrentPresenter`. Optional. The presenter that defines the way you want to display the Filters.
```kotlin Kotlin icon=code theme={"system"}
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = "YourApplicationID",
apiKey = "YourSearchOnlyAPIKey",
indexName = "YourIndexName"
)
val filterState = FilterState()
val viewModel = FilterCurrentViewModel()
val connection = ConnectionHandler()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val view: FilterCurrentView = FilterCurrentViewImpl(chipGroup) // with your `ChipGroup` view
connection += searcher.connectFilterState(filterState)
connection += viewModel.connectFilterState(filterState)
connection += viewModel.connectView(view)
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connection.disconnect()
searcher.cancel()
}
}
```
### Compose UI
InstantSearch provides the `FilterCurrentState` as a state model,
which is an implementation of the `FilterCurrentView` interface.
You need to connect `FilterCurrentState` to the `FilterCurrentConnector` or `FilterCurrentViewModel` like any other `FilterCurrentView` implementation.
```kotlin Kotlin icon=code theme={"system"}
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = "YourApplicationID",
apiKey = "YourSearchOnlyAPIKey",
indexName = "YourIndexName"
)
val color = "color"
val price = "price"
val tags = "_tags"
val groupColor = FilterGroupID(color)
val groupPrice = FilterGroupID(price)
val groupTags = FilterGroupID(tags)
val filters = filters {
group(groupColor) {
facet(color, "red")
facet(color, "green")
}
group(groupTags) {
tag("mobile")
}
group(groupPrice) {
comparison(price, NumericOperator.NotEquals, 42)
range(price, IntRange(0, 100))
}
}
val filterState = FilterState(filters)
val chipGroupColors = FilterCurrentState()
val currentFiltersColor = FilterCurrentConnector(filterState, listOf(groupColor))
val chipGroupAll = FilterCurrentState()
val currentFiltersAll = FilterCurrentConnector(filterState)
val connections = ConnectionHandler(currentFiltersColor, currentFiltersAll)
init {
connections += searcher.connectFilterState(filterState)
connections += currentFiltersAll.connectView(chipGroupAll)
connections += currentFiltersColor.connectView(chipGroupColors)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Column { // your own UI composable to display filters
chipGroupAll.filters.forEach { (filterGroupAndID, filter) ->
Chip(text = filter, onClick = { chipGroupAll.selectFilter(filterGroupAndID) })
}
chipGroupColors.filters.forEach { (filterGroupAndID, filter) ->
Chip(text = filter, onClick = { chipGroupColors.selectFilter(filterGroupAndID) })
}
}
}
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
searcher.cancel()
connections.disconnect()
}
}
```
## Parameters
The default filters to display.
The [`FilterState`](/doc/api-reference/widgets/filter-state/android) that will hold your filters.
When specified, only matching current [refinements](/doc/api-reference/widgets/refinement-list/android) will be displayed.
## View
The view that renders the current filters.
The presenter that defines the way filters are displayed.
```kotlin Kotlin icon=code theme={"system"}
val view = FilterCurrentViewImpl(chipGroup, chipLayout) // with your view and layout
val presenter = object : FilterCurrentPresenter {
// Implement the interface here
}
currentFilters.connectView(view, presenter)
```