# Dropdown Select - Single Selection Component
The Dropdown Select - Single Selection Component supports customizing the option text, icon, and callback parameters of the single selection menu, making it an interactive component. This document introduces the JSON structure and related properties of the Dropdown Select - Single Selection Component.
## Notes
- The minimum supported Feishu version for the Dropdown Select - Single Selection Component is V3.7.0. If the version is lower than this, users will be prompted with **Current version does not support viewing this message** when using this component.
- In the card JSON code, if the Dropdown Select - Single Selection Component is directly located at the root node of the card instead of being nested within other components, you need to configure its JSON data in the `actions` field of the [interaction module](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/component-list/common-components-and-elements) (`"tag": "action"`).
## Nesting Rules
The Dropdown Select - Single Selection Component supports nesting within columns, form containers, collapsible panels, and loop containers.
## Component Properties
### JSON Structure
The structure of the Dropdown Select - Single Selection Component is as follows:
```json
{
"tag": "select_static", // Tag of the dropdown select-single component.
"type": "text", // Component border style. Default value is default.
"name": "select_static1", // Unique identifier for the dropdown select-single component. Effective when the dropdown select-single component is embedded within a form container, used to identify which dropdown select-single component the submitted text belongs to.
"required": false, // Whether the content of the dropdown select-single component is required. Default value is false. This property is available when the dropdown select-single component is embedded within a form container. It will result in an error or have no effect in other cases.
"disabled": false, // Whether this single-selection component is disabled. Default value is false.
"initial_option": "option_1", // Initial content displayed for the options. Default is empty.
"placeholder": {
// Placeholder text inside the dropdown select component.
"tag": "plain_text",
"content": "Default Placeholder Text"
},
"width": "default", // Width of the dropdown select component.
"behaviors": [
{ // Configure callback interactions for the dropdown selection component.
"type": "callback",
"value": {
// Callback interaction data. Supports data types of either string or object. The Open Platform SDK only supports object-type data.
"key": "value"
}
}
],
"options": [
// Option configuration
{
"text": {
// Option name
"tag": "plain_text",
"content": "I am an interactive component"
},
"icon": {
// Add an icon as the prefix icon for the option. Supports custom or standard icons from the icon library.
"tag": "standard_icon", // Icon type.
"token": "chat-forbidden_outlined", // Token of the icon. Only effective when tag is standard_icon.
"color": "orange", // Icon color. Only effective when tag is standard_icon.
"img_key": "img_v2_38811724" // Key of the image. Only effective when tag is custom_icon.
},
"value": "selectDemo1" // Option callback value, supports string type data.
}
],
"confirm": {
// Configuration for the confirmation modal
"title": {
"tag": "plain_text",
"content": "Modal Title"
},
"text": {
"tag": "plain_text",
"content": "Modal Body Text"
}
}
}
```
### Field Descriptions
The field descriptions for the dropdown-select component are as follows:
Field | Required | Type | Default | Description
---|---|---|---|---
tag | Yes | string | / | The label of the component. For the dropdown-select component, it takes a fixed value of `select_static`.
type | No | string | default | The border style of the component. Possible values:
- default: with border style
- text: pure text style without borders
name | No | String | empty | The unique identifier of the radio component. This attribute is effective when the radio component is embedded in a form container to identify which radio component the user-submitted text belongs to.
**Note**: When the radio component is nested in a form container, this field is required and must be unique within the card scope.
required | No | Boolean | false | Whether the content of the radio component is required. This attribute is available when the component is embedded in a form container. Other situations will result in errors or ineffective. Possible values:
- true: The radio component is required. When the user clicks "Submit" in the form container without filling in the radio component, the front-end prompts "Required items are not filled in", and no callback request is sent to the developer's server.
- false: The radio component is optional. When the user clicks "Submit" in the form container without filling in the radio component, the data in the form container is still submitted.
disabled | No | Boolean | false | Whether to disable the radio component. This attribute is only supported by Feishu clients version 7.4 and above. Possible values:
- true: Disable the radio component
- false: The radio component remains available
initial_option | No | String | empty | The initial option content of the dropdown component. This configuration will override the placeholder text configuration.
placeholder | No | Object | / | The placeholder text inside the dropdown select component.
└ tag | Yes | String | plain_text | Placeholder prompt label. Fixed value is `plain_text`.
└ content | No | String | empty | The content of the placeholder text.
width | No | String | default | The width of the radio component. Supports the following enumerated values:
- default: Default width
- fill: Maximum supported width of the card
- [100,∞)px: Custom width. When exceeding the width of the card, it will be displayed according to the maximum supported width
behaviors | No | Array | / | Interaction behavior. For details, see [Configuring card interactions](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/configuring-card-interactions).
options | No | Array of objects | / | Configuration of options.
└ text | Yes | Object | / | The name of the option.
└ └ tag | Yes | String | plain_text | The tag of the option name. Fixed value is `plain_text`.
└ └ content | Yes | String | empty | The text of the option name.
└ icon | No | Object | / | Add an icon as a prefix icon for the text. Supports custom or icons from the icon library.
└└ tag | No | String | / | Tag of the icon type. Possible values:
- `standard_icon`: Use icons from the icon library.
- `custom_icon`: Use custom images as icons.
└└ token | No | String | / | Token of the icons in the icon library. Effective when `tag` is `standard_icon`. Enumeration values refer to [Icon Library](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/enumerations-for-icons).
└└ color | No | String | / | Color of the icon. Supports setting colors for linear and solid icons (i.e., icons with `outlined` or `filled` at the end of the token). Effective when `tag` is `standard_icon`. Enumeration values refer to [Enumeration Values for Colors](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/enumerations-for-fields-related-to-color).
└└ img_key | No | String | / | Key of the custom prefix icon image. Effective when `tag` is `custom_icon`.
Method of obtaining the icon key: Call the [Upload Image](https://open.feishu.cn/document/uAjLw4CM/ukTMukTMukTM/reference/im-v1/image/create) interface to upload an image for sending messages, and obtain the image_key of the image in the return value.
└ value | Yes | String | / | Custom option callback value. When the user clicks an option of the interactive component, the value of `value` will be returned to the server receiving the callback data. Later, you can process business based on the value received by the server.
**Note**: Within the same selection component, the `value` of each option must be unique. Otherwise, there will be an interaction exception on the user side and the server will not be able to recognize which option the user clicked on.
confirm | No | Struct | This attribute does not take effect by default. | Configuration of the confirmation popup. It prompts the confirmation popup when the user submits; only when the user clicks confirm will the entered content be submitted. This field provides confirmation and cancel buttons by default, and you only need to configure the title and content of the popup.
**Note**: The confirm field only triggers the confirmation popup when the button containing the submit attribute is clicked by the user.
confirm.title | Yes | Struct | / | Title of the confirmation popup.
confirm.title.tag | Yes | String | plain_text | Tag of the confirmation popup title text. Fixed value is `plain_text`.
confirm.title.content | Yes | String | / | Content of the confirmation popup title.
confirm.text | Yes | Struct | / | Text content of the confirmation popup.
confirm.text.tag | Yes | String | plain_text | Tag of the confirmation popup text. Fixed value is `plain_text`.
confirm.text.content | Yes | String | / | Specific content of the confirmation popup text.
### Callback Structure
After successfully configuring interactions for the component, the callback data will be received at the request address you configured in the developer backend when the user interacts with the component.
- If you added a new version of card callback interaction (`card.action.trigger`), refer to [Card Callback Interaction](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/card-callback-communication) for callback structure.
- If you added an old version of card callback interaction (`card.action.trigger_v1`), refer to [Message Card Callback Interaction (Old)](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/configuring-card-callbacks/card-callback-structure) for callback structure.
## Sample Code
The following JSON sample code achieves the card effect shown in the image below:
```json
{
"i18n_elements": {
"zh_cn": [
{
"tag": "action",
"actions": [
{
"tag": "select_static",
"placeholder": {
"tag": "plain_text",
"content": "请选择"
},
"options": [
{
"text": {
"tag": "plain_text",
"content": "选项1"
},
"value": "1",
"icon": {
"tag": "standard_icon",
"token": "signature_outlined"
}
},
{
"text": {
"tag": "plain_text",
"content": "选项2"
},
"value": "2",
"icon": {
"tag": "standard_icon",
"token": "signature_outlined"
}
}
],
"type": "default",
"width": "default",
"initial_option": "option_1"
}
]
}
]
}
}
```