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