SelectField Dropdown Select - DingTalk Help Center

When to Use

Use to replace the native select and choose an option from a limited set. The core capability is selection.

Component Example

Component Properties

Attribute	Description	Type	Default
`autoWidth`	Whether the dropdown menu aligns with the selector.	`boolean`	`true`
`behavior`	Display state of the form component.	Behavior	`'NORMAL'`
`dataSource`	Configure options.	DataSource[]	`[ { "text": "Option 1", "value": "1" }, { "text": "Option 2", "value": "2" }, { "text": "Option 3", "value": "3" } ]`
`filter`	Local filtering method. Takes effect only when local filtering is enabled.	`(value: string, data: DataSource) => boolean`	-
`filterLocal`	Whether local filtering is supported. Turn off when the data source is remote.	`boolean`	-
`hasArrow`	Whether to show the dropdown arrow.	`boolean`	`true`
`hasBorder`	Whether to show a border.	`boolean`	`true`
`hasClear`	Whether to show the clear button.	`boolean`	`true`
`label`	Title of the form component.	`string`	-
`labelAlign`	Position of the form component title.	`'left' \| 'top'`	`'top'`
`labelColOffset`	Offset position of the title. The value uses grid units, where 1 represents 1/24.	`number`	`0`
`labelColSpan`	Width of the title area. The value uses grid units, where 1 represents 1/24.	`number`	`4`
`labelTextAlign`	Text alignment of the form component title.	`'left' \| 'right'`	`'right'`
`labelTipsIcon`	Icon of the title tips entry. Takes effect when labelTipsTypes is set to text or render.	`string`	-
`labelTipsRender`	Custom render method for the title tips. Takes effect when labelTipsTypes is set to render.	`(props: IComponentProps) => ReactNode`	-
`labelTipsText`	Text content of the title tips. Takes effect when labelTipsTypes is set to text.	`string`	-
`labelTipsTypes`	Type of the title tips.	LabelTipsTypes	`'none'`
`notFoundContent`	Text displayed when there is no matching option.	`string`	`'Please enter'`
`onChange`	Event triggered when the component value changes.	`(value: string) => void`	-
`onRemove`	Event triggered when a value is removed.	`(item: object) => void`	-
`onSearch`	Event triggered when the search box value changes.	`(keyword: string) => void`	-
`onVisibleChange`	Event triggered when the dropdown is shown or hidden.	`(visible: boolean) => void`	-
`placeholder`	Placeholder text of the form component.	`string`	`'Please select'`
`searchDelay`	Search delay in milliseconds.	`number`	`300`
`showSearch`	Whether search is enabled after expanding the dropdown. Always true in tag mode.	`boolean`	`true`
`size`	Size of the form component.	Size	`'medium'`
`tips`	Description text of the form component, displayed below the control.	`string`	-
`useDetailValue`	Whether to use the object type {label, value} for value.	`boolean`	`false`
`validation`	Form validation settings. For details, see the form validation documentation.	Validation[]	`[]`
`value`	Default value of the current component.	`string`	-
`wrapperColOffset`	Offset position of the form component. The value uses grid units, where 1 represents 1/24.	`number`	`0`
`wrapperColSpan`	Width of the form component area. The value uses grid units, where 1 represents 1/24.	`number`	`0`