Dropdown

Provide users with a dropdown with a list of options to choose from. Good for when there are more options available than will fit on a list component.

Name Type Default Values Description
title string - - Text that is show in the dropdown
value string - - the default value seleced by the dropdown
description string - - the description that appears on the call to action
confirmButtonText string CONFIRM - Text that appears on the confirm button
id string - - Unique id for each drop down option
interactionType string utterance utterance, event
  • Event fires a markup interaction with the option selected
  • Utterance adds a message to the timeline with the option selected
<TimelineMessage>
  <Dropdown value="3" title="Select an appropriate option" description="When would you like to set it?" confirmButtonText="Select">
    <DropdownItem id="1" title="Option 1" />
    <DropdownItem id="2" title="Option 2" />
    <DropdownItem id="3" title="Option 3" />
  </Dropdown>
</TimelineMessage>

To use this markup with markup interactions

<TimelineMessage>
  <Dropdown value="3" description="When would you like to set it?" interactionType="event">
    <DropdownItem id="1" title="Option 1" />
    <DropdownItem id="2" title="Option 2" />
    <DropdownItem id="3" title="Option 3" />
  </Dropdown>
</TimelineMessage>