Skip to content

Chooser

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

Options

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

Item

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

Example

          {
            "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"
                }
              ]
            }
          }