Skip to content

Chooser

A variant of filterable widget as well as form control. The ancestor of this widget should be a filter widget or a form widget

Name Description
component chooser
text text header (optional)
hint a text that help explain to the user of what this option is (optional)
kind type of chooser, radio, checkbox, chip, button-group, icon-group, dropdown, timezone, language
alignment left or right, where to place the radio/checkbox
justifyContent how to place the radio/checkbox and label, start, end, space-between, space-evenly, space-around, center
itemWidth applicable to icon-group kind only
options additional options for the widget
styles.header styles for header

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.
anyValueText text to replace "Any" selection, e.g. Select all, Any, etc, default to Select all for checkbox, Any for others
displayAnyOption boolean, should display any option or not, default to true
default on, off, whether to select all items by default or not, default to off
sortByKey boolean, if true, indicate that this option will be used as sorting
showAll boolean, if true, display all available items, default to false
showAllText text to display the show all button, default to 'Show all'
items List of items for the chooser

Item

Name Description
text label for the item
value value for the item
iconName optional icon
selected boolean if true, this item is selected

Example

          {
            "component": "chooser",
            "text": "Rating",
            "hint": "Star rating",
            "kind": "button-group",
            "styles": {
              "root": {

              },
              "header": {

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