SelectionInput

Only supported in dialogs. Support for card messages coming soon.

The SelectionInput widget provides a set of selectable items, like a list of check boxes, radio buttons, switches, or a dropdown menu.

The widget supports suggestions, which help users enter uniform data, and on-change actions, which are Actions that run when a change occurs in the text input field, like a user adding or deleting text.

When you need to collect defined and standardized data from users, use this SelectionInput widget. To collect defined data from users, use the TextInput widget instead.

Chat apps receive and can process the value of selected items during form input events. For details about working with form inputs, see Receive form data.

Example

The following image displays a card consisting of a SelectionInput widget.

Checkboxes

Figure 1: A dialog asks the user to specify whether a contact is professional and/or personal with a checkbox SelectionInput widget.

Radio Buttons

Figure 2: A dialog asks the user to specify whether a contact is professional or personal with a radio SelectionInput widget.

Switches

Figure 3: A dialog asks the user to specify whether a contact is professional or personal with a switch SelectionInput widget.

Dropdown

Figure 4: A dialog asks the user to specify whether a contact is professional or personal with a dropdown SelectionInput widget.

Here's the card's JSON:

Checkboxes

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "header": "Add new contact",
            "widgets": [
              {
                "selectionInput": {
                  "type": "CHECK_BOX",
                  "label": "Contact type",
                  "name": "contactType",
                  "items": [
                    {
                      "text": "Work",
                      "value": "Work",
                      "selected": false
                    },
                    {
                      "text": "Personal",
                      "value": "Personal",
                      "selected": false
                    }
                  ]
                }
              },
            ]
          }
        ]
      }
    }
  ]
}

Radio Buttons

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "header": "Add new contact",
            "widgets": [
              {
                "selectionInput": {
                  "type": "RADIO_BUTTON",
                  "label": "Contact type",
                  "name": "contactType",
                  "items": [
                    {
                      "text": "Work",
                      "value": "Work",
                      "selected": false
                    },
                    {
                      "text": "Personal",
                      "value": "Personal",
                      "selected": false
                    }
                  ]
                }
              },
            ]
          }
        ]
      }
    }
  ]
}

Switches

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "header": "Add new contact",
            "widgets": [
              {
                "selectionInput": {
                  "type": "SWITCH",
                  "label": "Contact type",
                  "name": "contactType",
                  "items": [
                    {
                      "text": "Work",
                      "value": "Work",
                      "selected": false
                    },
                    {
                      "text": "Personal",
                      "value": "Personal",
                      "selected": false
                    }
                  ]
                }
              },
            ]
          }
        ]
      }
    }
  ]
}

Dropdown

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "header": "Add new contact",
            "widgets": [
              {
                "selectionInput": {
                  "type": "DROPDOWN",
                  "label": "Contact type",
                  "name": "contactType",
                  "items": [
                    {
                      "text": "Work",
                      "value": "Work",
                      "selected": false
                    },
                    {
                      "text": "Personal",
                      "value": "Personal",
                      "selected": false
                    }
                  ]
                }
              },
            ]
          }
        ]
      }
    }
  ]
}

SelectionInput JSON representation and fields

JSON representation
{ "name": string, "label": string, "type": enum (SelectionType), "items": [ { object (SelectionItem) } ], "onChangeAction": { object (Action) } }

Fields
name	string The name by which the selection input is identified in a form input event. For details about working with form inputs, see Receive form data .
label	string The text that appears above the selection input field in the user interface. Specify text that helps the user enter the information your app needs. For example, if users are selecting the urgency of a work ticket from a drop-down menu, the label might be "Urgency" or "Select urgency".
type	enum ( SelectionType ) The way that an option appears to users. Different options support different types of interactions. For example, users can enable multiple check boxes, but can only select one value from a dropdown menu. Each selection input supports one type of selection. Mixing check boxes and switches, for example, is not supported.
items[]	object ( SelectionItem ) An array of the selected items. For example, all the selected check boxes.
onChangeAction	object ( Action ) If specified, the form is submitted when the selection changes. If not specified, you must specify a separate button that submits the form. For details about working with form inputs, see Receive form data .

SelectionType enumerated values

Enums
CHECK_BOX	A set of checkboxes. Users can select multiple check boxes per selection input.
RADIO_BUTTON	A set of radio buttons. Users can select one radio button per selection input.
SWITCH	A set of switches. Users can turn on multiple switches at once per selection input.
DROPDOWN	A dropdown menu. Users can select one dropdown menu item per selection input.

SelectionItem JSON representation and fields

JSON representation
{ "text": string, "value": string, "selected": boolean }

Fields
text	string The text displayed to users.
value	string The value associated with this item. The client should use this as a form input value. For details about working with form inputs, see Receive form data .
selected	boolean When true , more than one item is selected. If more than one item is selected for radio buttons and dropdown menus, the first selected item is received and the ones after are ignored.