+description: Learn about card actions such as openUrl, messageBack, imBack, invoke, and signin, and Adaptive Card actions such as Action.Submit.

+Adaptive Cards support the following six action types:

+* [Action.ResetInputs](dynamic-search.md#actionresetinputs): Resets the values of the inputs in an Adaptive Card.

+description: Learn about card text formatting with Markdown and HTML, the CodeBlock element, borders, rounded corners, and how to design responsive Adaptive Cards.

+You can add borders and rounded corners to various elements in Adaptive Cards. For more information, see [borders and rounded corners in Adaptive Cards](#borders-and-rounded-corners-in-adaptive-cards).

+## Borders and rounded corners in Adaptive Cards

+Adaptive Cards support a wide variety of elements, but having too many elements clutters the card and hinders readability. You can add borders to various elements in an Adaptive Card to delineate them, making it easier for users to distinguish between them.

+# [Desktop](#tab/desktop1)

+**Without borders**

+**With borders**

+# [Mobile](#tab/mobile1)

+**Without borders**

+**With borders**

+You can use Adaptive Cards across multiple hosts. Many of these hosts follow contemporary design systems and frameworks. Adaptive Cards support rounded corners for various elements to maintain consistency with these hosts and keep up with latest design trends. Rounded corners make the card design look more modern and visually appealing, creating a softer visual flow.

+# [Desktop](#tab/desktop2)

+**Without rounded corners**

+**With rounded corners**

+# [Mobile](#tab/mobile2)

+**Without rounded corners**

+**With rounded corners**

+You can add borders and rounded corners only to the following elements:

+| Element | Borders | Rounded Corners |

+| | :: | :: |

+| [`Container`](https://adaptivecards.io/explorer/Container.html) | ✔️ | ✔️ |

+| [`ColumnSet`](https://adaptivecards.io/explorer/ColumnSet.html) | ✔️ | ✔️ |

+| [`Column`](https://adaptivecards.io/explorer/Column.html) | ✔️ | ✔️ |

+| [`Table`](https://adaptivecards.io/explorer/Table.html) | ✔️ | ✔️ |

+| [`Image`](https://adaptivecards.io/explorer/Image.html) | ❌ | ✔️ |

+### Implement borders and rounded corners in Adaptive Cards

+To add a border to a `Container`, `ColumnSet`, or `Column` element, set the `showBorder` property to `true` for the element in the cardΓÇÖs payload. To add a border to a `Table` element, set the `showGridLines` property to `true`. The border color matches the elementΓÇÖs style, as defined in the [`HostConfig.json`](/adaptive-cards/rendering-cards/host-config).

+| Property | Type | Required | Description |

+| | | | |

+| `showBorder` | Boolean | No | Adds a border to the `Container`, `ColumnSet`, or `Column` elements. |

+| `showGridLines` | Boolean | No | Adds a border to the `Table` element. Default value: `true` |

+To add rounded corners to a `Container`, `ColumnSet`, `Column`, or `Table` element, set the `roundedCorners` property to `true` for the element in the cardΓÇÖs payload. To add rounded corners to the `Image` element, set the `style` property to `RoundedCorners` within the element.

+| Property | Type | Required | Description |

+| | | | |

+| `roundedCorners` | Boolean | No | Adds rounded corners to the `Container`, `ColumnSet`, `Column`, or `Table` elements. |

+| `style` | String | No | Adds rounded corners to the `Image` element when you set the value to `roundedCorners`. |

+The following JSON payload shows an Adaptive Card with borders and rounded corners around its elements:

+```json

+{

+ "type": "AdaptiveCard",

+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",

+ "version": "1.5",

+ "body": [

+ {

+ "type": "TextBlock",

+ "text": "Below is a **ColumnSet** with borders and rounded corners:",

+ "wrap": true

+ },

+ {

+ "type": "ColumnSet",

+ "showBorder": true,

+ "roundedCorners": true,

+ "style": "emphasis",

+ "columns": [

+ {

+ "type": "Column",

+ "width": "stretch",

+ "showBorder": true,

+ "roundedCorners": true,

+ "style": "accent",

+ "items": [

+ {

+ "type": "TextBlock",

+ "text": "This is a **Column** with borders and rounded corners",

+ "wrap": true

+ }

+ ]

+ },

+ {

+ "type": "Column",

+ "width": "stretch",

+ "showBorder": true,

+ "roundedCorners": true,

+ "style": "good",

+ "items": [

+ {

+ "type": "TextBlock",

+ "text": "This is another **Column** with borders and rounded corners",

+ "wrap": true

+ }

+ ]

+ }

+ ]

+ },

+ {

+ "type": "Container",

+ "style": "attention",

+ "showBorder": true,

+ "roundedCorners": true,

+ "items": [

+ {

+ "type": "TextBlock",

+ "text": "This is a **Container** with borders and rounded corners",

+ "wrap": true

+ }

+ ]

+ },

+ {

+ "type": "Table",

+ "roundedCorners": true,

+ "columns": [

+ {

+ "width": 1

+ },

+ {

+ "width": 1

+ }

+ ],

+ "rows": [

+ {

+ "type": "TableRow",

+ "cells": [

+ {

+ "type": "TableCell",

+ "items": [

+ {

+ "type": "TextBlock",

+ "text": "This **Table**...",

+ "wrap": true

+ }

+ ]

+ },

+ {

+ "type": "TableCell",

+ "items": [

+ {

+ "type": "TextBlock",

+ "text": "...has borders and rounded corners",

+ "wrap": true

+ }

+ ]

+ }

+ ]

+ }

+ ]

+ },

+ {

+ "type": "TextBlock",

+ "text": "The below **Image** has rounded corners:",

+ "wrap": true

+ },

+ {

+ "type": "Image",

+ "url": "https://media.licdn.com/dms/image/C4E03AQF5uhIghtPzrA/profile-displayphoto-shrink_400_400/0/1517690039090?e=2147483647&v=beta&t=g1DFilNHZhah2fhaTS9ylBxGGGb2XyPA2C7LZptk4QE",

+ "width": "100px",

+ "style": "RoundedCorners"

+ }

+ ]

+}

+```

+To explore Adaptive Card templates, see [Adaptive Card starter collection](design-effective-cards.md#adaptive-card-starter-collection).

+description: Learn about Adaptive Cards and its types and how to design Adaptive Cards with Adaptive Card designer, Microsoft Teams UI Kit, and Adaptive Card templates.

+## Adaptive Card starter collection

+The Adaptive Card starter collection is a curated set of Adaptive Card templates for Teams. These templates serve as a practical starting point to inspire you to design your own Adaptive Card. The templates help you understand MicrosoftΓÇÖs design principles, offer insights into the correct structure, and help explore interaction patterns in Adaptive Cards. You can use the templates as they are, or customize them for your app's requirements.

+> [!div class="nextstepaction"]

+> [Adaptive Card templates](https://github.com/OfficeDev/Microsoft-Teams-Adaptive-Card-Samples/tree/main)

+description: In this module, learn how to use Input.ChoiceSet to implement static and dynamic typeahead search and dependent inputs in Adaptive Cards.

+### Data.Query

+| associatedInputs | String | No | Specifies the input values associated with the `Data.Query` object. Allowed values: `auto`, `none` |

+When you define the `associatedInputs` property under the `Data.Query` object and set it to `auto`, Teams includes all input values of the card in the data query request sent to the bot. If you set the value to `none`, Teams doesn't include any input values in the data query request. This property allows the bot to use input values as search filters to refine dynamic typeahead search. For more information, see [dependent inputs](#dependent-inputs).

+## Dependent inputs

+> [!NOTE]

+> Dependent inputs aren't available in [Government Community Cloud (GCC), GCC High, and Department of Defense (DOD)](~/concepts/app-fundamentals-overview.md#government-community-cloud) environments.

+You can design Adaptive Cards in Teams where the value of an input depends on the value of another. For example, consider an Adaptive Card with two `Input.ChoiceSet` dropdowns: one for selecting a country and another for selecting a specific city within that country. The first dropdown must filter the cities displayed in the second dropdown. This can be achieved by creating an `Input.ChoiceSet` dropdown with dynamic typeahead search that depends on one or more other inputs in the card.

+### How it works

+To create dependent inputs in an Adaptive Card, use the following properties:

+1. **valueChangedAction**: Define this property on any input element, such as `Input.Text` or `Input.ChoiceSet`. This property allows you to define the `Action.ResetInputs` action, which triggers a data query request to the bot when a user changes the value of an input in the card.

+1. **Action.ResetInputs**: This action resets the values of the inputs you specify under `targetInputIds` to their default values.

+1. **associatedInputs**: Define this property under the [Data.Query](#dataquery) object. This property ensures that when Teams makes a data query request to your bot, it includes the values of all the inputs in the card.

+### Action.ResetInputs

+The `Action.ResetInputs` property resets the values of the inputs in an Adaptive Card. By default, the `Action.ResetInputs` property resets the values of all the inputs in an Adaptive Card. If you must reset particular input values, define the IDs of the elements containing those values in the `targetInputIds` property.

+| Property| Type | Required | Description |

+|||||

+| `valueChangedAction` | Action.ResetInputs | ✔️ | Contains the `Action.ResetInputs` property. |

+| `Action.ResetInputs` | String | ✔️ | Resets the input values. |

+| `targetInputIds` | Array of strings | | Defines the IDs of the input values to be reset. |

+| `id` | String | | A unique identifier for the action. |

+| `requires` | Object | | A list of capabilities the action requires the host application to support. If the host application doesn't support at least one of the listed capabilities, the action isn't rendered, and its fallback is rendered if provided. |

+| `fallback` | Object or String | | Defines an alternate action to render. Set the value to `drop` to ignore the action if `Action.ResetInputs` is unsupported or if the host application doesn't support all the capabilities specified in the `requires` property. |

+| `iconUrl` | String | | A URL to an image to be displayed on the left of the action's title. Data URIs are supported. |

+| `isEnabled` | Boolean | | Defines the `enabled` or `disabled` state of the action. A user can't select a disabled action. If the action is represented as a button, the button's style reflects this state. |

+| `mode` | String | | Defines if the action is primary or secondary. Allowed values: `primary`, `secondary` |

+| `style` | String | | Defines the style of the action, affecting its visual and spoken representations. Allowed values: `default`, `positive`, or `destructive` |

+| `title` | String | | The title of the action, as it appears on a button. |

+| `tooltip` | String | | The tooltip text to display when a user hovers over the action. |

+### Example

+Consider the earlier example: a card with two `Input.ChoiceSet` dropdowns that allow users to select a country and a city within that country. The following card payload demonstrates how to use the `valueChangedAction` and `associatedInputs` properties to implement the card.

+* The `valueChangedAction` property is defined alongside the `country` input to ensure that whenever its value changes, the value of the `city` input is reset.

+* Since the `city` input is required, resetting its value forces the user to select a new city whenever the value of `country` changes.

+* With the `associatedInputs` property defined, when Teams sends a data query request to the bot, it includes the value of the `country` input. Thus, when the user starts typing in the `city` input, the card returns a list of cities for the selected country.

+```json

+{

+ "type": "AdaptiveCard",

+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",

+ "version": "1.5",

+ "body": [

+ {

+ "size": "ExtraLarge",

+ "text": "Country Picker",

+ "weight": "Bolder",

+ "wrap": true,

+ "type": "TextBlock"

+ },

+ {

+ "id": "country",

+ "type": "Input.ChoiceSet",

+ "label": "Select a country or region:",

+ "choices": [

+ {

+ "title": "USA",

+ "value": "usa"

+ },

+ {

+ "title": "France",

+ "value": "france"

+ },

+ {

+ "title": "India",

+ "value": "india"

+ }

+ ],

+ "valueChangedAction": {

+ "type": "Action.ResetInputs",

+ "targetInputIds": [

+ "city"

+ ]

+ },

+ "isRequired": true,

+ "errorMessage": "Please select a country or region"

+ },

+ {

+ "style": "filtered",

+ "choices.data": {

+ "type": "Data.Query",

+ "dataset": "cities",

+ "associatedInputs": "auto"

+ },

+ "id": "city",

+ "type": "Input.ChoiceSet",

+ "label": "Select a city:",

+ "placeholder": "Type to search for a city in the selected country",

+ "isRequired": true,

+ "errorMessage": "Please select a city"

+ }

+ ],

+ "actions": [

+ {

+ "title": "Submit",

+ "type": "Action.Submit"

+ }

+ ]

+}

+```

+The following code snippet shows an example of a bot invoke request for the card payload:

+```json

+{

+ "name": "application/search",

+ "type": "invoke",

+ "value": {

+ "queryText": "india",

+ "queryOptions": {

+ "skip": 0,

+ "top": 15

+ },

+ "dataset": "cities",

+ "data": {

+ "country": "<value of the country input>"

+ }

+ },

+ // …. other fields

+}

+```

+### Dependent inputs in Adaptive Cards

+You can design Adaptive Cards in Teams where the value of an input depends on the value of another. For example, consider an Adaptive Card with two `Input.ChoiceSet` dropdowns: one for selecting a country and another for selecting a specific city within that country. The first dropdown must filter the cities displayed in the second dropdown. This can be achieved by creating an `Input.ChoiceSet` dropdown with dynamic typeahead search that depends on one or more other inputs in the card. For more information, see [dependent inputs](cards/dynamic-search.md#dependent-inputs).

+### Borders and rounded corners in Adaptive Cards

+You can add borders to the `Container`, `ColumnSet`, `Column`, and `Table` elements in Adaptive Cards to delineate different sections of the card. You can add rounded corners to the `Container`, `ColumnSet`, `Column`, `Table`, and `Image` elements in Adaptive Cards to make the card design look modern and visually appealing. For more information, see [borders and rounded corners in Adaptive Cards](cards/cards-format.md#borders-and-rounded-corners-in-adaptive-cards).

+**2024 November**

+* ***November 07, 2024***: [Build dependent inputs with typeahead search in Adaptive Cards.](task-modules-and-cards/cards/dynamic-search.md#dependent-inputs)

+* ***November 07, 2024***: [Use Adaptive Card templates to design visually appealing and actionable Adaptive Cards.](task-modules-and-cards/cards/design-effective-cards.md#adaptive-card-starter-collection)

+| 29/10/2024 | Share content to live and upcoming meetings with Share to Teams. | Integrate with Teams > Share to Teams > [Share to Teams from web apps](concepts/build-and-test/share-to-teams-from-web-apps.md) |

+| 28/10/2024 | Enable API key and SSO authentication for your API-based message extension. | Add authentication > Enable authentication for API-based message extensions > [Overview](messaging-extensions/build-api-based-message-extension.md) |

+| 28/10/2024 | Update bot or message extension app to use certificate or MSI for authentication. | Tools and SDKs > Tools > Teams Toolkit for Visual Studio Code > Prepare to build apps using Teams Toolkit > Develop your Teams app > [Use certificate or MSI for app authentication](toolkit/update-bot-me-app-to-use-certificate-or-msi-for-authentication.md) |

+| 28/10/2024 | Debug apps in Teams desktop client to improve debugging performance and efficiency. | Tools and SDKs > Tools > Teams Toolkit for Visual Studio Code > Prepare to build apps using Teams Toolkit > Debug your Teams app > [Debug in Teams desktop client](toolkit/debug-apps-in-Teams-desktop-client.md) |

+| 25/10/2024 | Introduced prompt suggestions for bots to create an engaging and insightful bot experience. | Build bots > Bot conversations > [Create prompt suggestions](bots/how-to/conversations/prompt-suggestions.md) |

+| 17/10/2024 | Introducing app manifest v1.19 with copilotAgents, declarativeAgents, and defaultLanguageFile. | App manifest > [App manifest](/microsoftteams/platform/resources/schema/manifest-schema) |

+| 17/10/2024 | Localize your Copilot agents. | Microsoft 365 Copilot extensibility > Work with the Copilot ecosystem > Agents are apps for Microsoft 365 > [Localizing your agent](/microsoft-365-copilot/extensibility/agents-are-apps#localizing-your-agent) |

+| 17/10/2024 | Build a personal tab with offline functionality. | Build tabs > Create a tab > [Offline tabs](tabs/how-to/create-personal-tab.md#offline-tabs) |

+| 26/08/2024 | Enhanced user experience for Teams app subscriptions purchased from Teams Store. | Monetize your app > Purchase and manage app subscriptions and licenses > [Subscription purchase experience](concepts/deploy-and-publish/appsource/prepare/end-user-purchase-experience.md#subscription-purchase-experience) |