Toggle filter

Filter data with a three-state choice.

A toggle filter has yes, no, and not-filtering states. Backlit parses true and 1 as yes. It parses false and 0 as no. The parsing is not case-sensitive. Any other value does not apply a filter.

API

filters.toggle(name: string): ToggleFilterBuilder

Method	Input	Result
`setLabel`	`string`	Sets the filter-control label.

Basic toggle filter

Use a toggle when a boolean condition is optional.

import {
  defineFilters,
  defineResource,
  filters,
  section,
} from '@backlit/sdk'

const orders = defineResource('orders', [])
const orderFilters = defineFilters([
  filters.toggle('paid'),
])

orders.view(
  'list',
  { filters: orderFilters },
  (_ctx, view) =>
    section('Orders').setFilters(view.state.filters)
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "list",
    "slots": {
      "content": [
        {
          "kind": "section",
          "title": "Orders",
          "slots": {
            "content": [],
            "filters": {
              "kind": "filters",
              "resource": "orders",
              "view": "list",
              "keyword": "f",
              "definesResult": true,
              "dependsOnResult": false,
              "filters": [
                {
                  "kind": "toggle",
                  "name": "paid",
                  "label": ""
                }
              ]
            }
          }
        }
      ]
    }
  }
}