Skip to content


A variant of filterable widget. The ancestor of this widget should be a filter widget.

Name Description
component chooser
text text header (optional)
hint a text that help explain to the user of what this option is (optional)
variant type of chooser, radio, checkbox, chip, button-group
alignment left or right, where to place the radio/checkbox
direction column or row, how to place the radio/checkbox (if it is a radio or checkbox variant)
justifyContent how to place the radio/checkbox and label, start, end, space-between, space-evenly, space-around, center
options additional options for the widget


Name Description
id a unique string that use to identiy this filter
multiSelected if true, allow multi selection, only applicable to chip and button-group
keyword a list of query keywords, e.g. body, name, first, last, key:someKey, etc
queryPrefix query prefix, e.g. where, given, ...
operator filter operator, e.g. contains, is, etc.
items List of items for the chooser


Name Description
text label for the item
value value for the item
iconName optional icon


            "component": "chooser",
            "text": "Rating",
            "hint": "Star rating",
            "variant": "button-group",
            "options": {
              "id": "starRating",
              "multiSelected": true,
              "keyword": "key:rating",
              "queryPrefix": "where",
              "operator": "is",
              "items": [
                  "text": "5 stars",
                  "value": "5"
                  "text": "4 stars",
                  "value": "4"
                  "text": "3 stars",
                  "value": "3"
                  "text": "2 stars",
                  "value": "2"
                  "text": "1 stars",
                  "value": "1"