Select filter

Filter data with one or more declared choices.

A select filter accepts values from a fixed list. Each option has a protocol value and a display label. Backlit ignores a value that is not in the declared options.

API

filters.select(name: string, options: FilterOption[]): SelectFilterBuilder

Method	Input	Result
`setLabel`	`string`	Sets the filter-control label.
`setCardinality`	`"one" \| "many"`	Selects one value or several values.

The default cardinality is one. The SDK does not include it in protocol output unless you set it.

Single value

Declare each allowed value and its display label.

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

const orders = defineResource('orders', [])
const orderFilters = defineFilters([
  filters.select('status', [
    { value: 'open', label: 'Open' },
    { value: 'shipped', label: 'Shipped' },
  ]),
])

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": "select",
                  "name": "status",
                  "label": "",
                  "options": [
                    {
                      "value": "open",
                      "label": "Open"
                    },
                    {
                      "value": "shipped",
                      "label": "Shipped"
                    }
                  ]
                }
              ]
            }
          }
        }
      ]
    }
  }
}

Multiple values

Use the many cardinality to accept several declared values. Backlit keeps valid members and removes invalid members from the parsed array.

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

const orders = defineResource('orders', [])
const orderFilters = defineFilters([
  filters
    .select('status', [
      { value: 'open', label: 'Open' },
      { value: 'shipped', label: 'Shipped' },
    ])
    .setCardinality('many'),
])

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": "select",
                  "name": "status",
                  "label": "",
                  "options": [
                    {
                      "value": "open",
                      "label": "Open"
                    },
                    {
                      "value": "shipped",
                      "label": "Shipped"
                    }
                  ],
                  "cardinality": "many"
                }
              ]
            }
          }
        }
      ]
    }
  }
}