> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CheckboxField Multiselect

> CheckboxField Multiselect component reference. Learn how to configure the option data source, default value, and state toggling to allow users to select multiple items from a group of options.

## 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](/open/yida/components/interface#behavior)             | `'NORMAL'`                                                                                                             |
| `dataSource`        | Configures the options                                                                                                                 | [DataSource\[\]](/open/yida/components/interface#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](/open/yida/components/interface#labeltipstypes) | `'none'`                                                                                                               |
| `onChange`          | Event triggered when the component value changes                                                                                       | `(value: string[]) => void`                                      | -                                                                                                                      |
| `size`              | Size of the form component                                                                                                             | [Size](/open/yida/components/interface#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](/open/yida/guide/concept/validation). | [Validation\[\]](/open/yida/components/interface#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`                                                                                                                    |