> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Filter Toggle
> Lets users toggle a specific filter.
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"}
FilterToggleConnector(
filterState: FilterState,
filter: Filter,
isSelected: Boolean,
groupID: FilterGroupID
)
```
Browse the Filter Toggle example code on GitHub.
## About this widget
Filter Toggle is a filtering view that displays any kind of [filter](/doc/guides/managing-results/refine-results/filtering),
and lets users refine the search results by toggling it on or off.
## Examples
```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.filter.Filter
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = "YourApplicationID",
apiKey = "YourSearchOnlyAPIKey",
indexName = "YourIndexName"
)
val filterState = FilterState()
val attributeSize = "size"
val filterSize = Filter.Numeric(attributeSize, NumericOperator.Greater, 40)
val filterToggle = FilterToggleConnector(filterState, filterSize)
val connection = ConnectionHandler(filterToggle, searcher.connectFilterState(filterState))
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val viewSize = FilterToggleViewCompoundButton(checkBoxSize)
connection += filterToggle.connectView(viewSize)
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
searcher.cancel()
connection.disconnect()
}
}
```
### Low-level API
If you want to fully control the Filter Toggle components and connect them manually, use the following components:
* `Searcher`. The [`Searcher`](/doc/api-reference/widgets/instantsearch/android) that handles your searches.
* `FilterState`. The current state of the filters.
* `FilterToggleViewModel`. The logic applied to the filter.
* `FilterToggleView`. The view that renders the filter toggle.
* `FilterPresenter`. Optional. The presenter to customize the display of the filters.
```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.filter.Filter
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = "YourApplicationID",
apiKey = "YourSearchOnlyAPIKey",
indexName = "YourIndexName"
)
val filterState = FilterState()
val attribute = "facetName"
val filter = Filter.Facet(attribute, "facetValue")
val viewModel = FilterToggleViewModel(filter)
val connection = ConnectionHandler()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val view: FilterToggleView = FilterToggleViewCompoundButton(checkBox) // with your `CompoundButton` 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 `FilterToggleState` as a state model,
which is an implementation of the `FilterToggleView` interface.
You need to connect `FilterToggleState` to the `FilterToggleConnector` or `FilterToggleViewModel` like any other `FilterToggleView` implementation.
```kotlin Kotlin icon=code theme={"system"}
import com.algolia.instantsearch.filter.Filter
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = "YourApplicationID",
apiKey = "YourSearchOnlyAPIKey",
indexName = "YourIndexName"
)
val filterState = FilterState()
val attributeSize = "size"
val filterSize = Filter.Numeric(attributeSize, NumericOperator.Greater, 40)
val filterToggleState = FilterToggleState()
val filterToggle = FilterToggleConnector(filterState, filterSize)
val connections = ConnectionHandler(filterToggle)
init {
connections += searcher.connectFilterState(filterState)
connections += filterToggle.connectView(filterToggleState)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyFilterToggle(filterToggleState) // your own UI composable to display filter toggle
}
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
searcher.cancel()
connections.disconnect()
}
}
```
## Parameters
The [`FilterState`](/doc/api-reference/widgets/filter-state/android) that will hold your filters.
The filter to apply.
If `true`, the filter is active when created.
When specified, the filter is grouped under this ID and composed with this operator.
Defaults to the used attribute, applying `FilterOperator.And` with any other filters of this group.
## View
The view that renders the filter toggle.
A presenter describing how to display a filter.
```kotlin Kotlin icon=code theme={"system"}
val view = FilterToggleViewCompoundButton(compoundButton) // with your own `CompoundButton` view
val presenter = object : FilterPresenter {
// Implement the interface here
}
filterToggle.connectView(view, presenter)
```