CheckboxField Multiselect - DingTalk Help Center

When to Use

When you need to select multiple items from a group of options.
When used alone, a Checkbox can represent a toggle between two states, similar to a switch. The difference is that toggling a switch triggers a state change immediately, whereas a Checkbox is typically used for state marking and works together with a submit action.

Component Example

Component Properties

Attribute	Description	Type	Default
`behavior`	Display state of the form component	Behavior	`'NORMAL'`
`dataSource`	Configures the options	DataSource[]	`[ { "text": "Option 1", "value": "1" }, { "text": "Option 2", "value": "2" }, { "text": "Option 3", "value": "3" } ]`
`iconPosition`	Icon position on mobile	`'left' \| 'right'`	`'left'`
`itemDirection`	Option layout direction on PC	`'hoz' \| 'ver'`	`'hoz'`
`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 follows the grid system, where 1 represents 1/24.	`number`	`0`
`labelColSpan`	Width of the title. The value follows the grid system, where 1 represents 1/24.	`number`	`4`
`labelTextAlign`	Text alignment of the form component title	`'left' \| 'right'`	`'right'`
`labelTipsIcon`	Icon for the title tooltip entry of the form component. Takes effect when labelTipsTypes is text or render.	`string`	-
`labelTipsRender`	Custom render method for the title tooltip of the form component. Takes effect when labelTipsTypes is render.	`(props: IComponentProps) => ReactNode`	-
`labelTipsText`	Tooltip text for the form component title. Takes effect when labelTipsTypes is text.	`string`	-
`labelTipsTypes`	Tooltip type for the form component title	LabelTipsTypes	`'none'`
`onChange`	Event triggered when the component value changes	`(value: string[]) => void`	-
`size`	Size of the form component	Size	`'medium'`
`tips`	Description of the form component, displayed below the control	`string`	-
`useDrawerInMobile`	Layout style on mobile. When true, options are laid out inline; when false, a bottom drawer is used.	`boolean`	`false`
`validation`	Validation settings for the form component. 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 follows the grid system, where 1 represents 1/24.	`number`	`0`
`wrapperColSpan`	Width of the form component. The value follows the grid system, where 1 represents 1/24.	`number`	`0`