Skip to main content
Supported Regions:上海

Multiple Choice

WdCheckboxList

Applicable Scenarios​

The page displays options in a tiled layout, allowing users to make multiple selections.

Basic Capabilities Description​

  1. Bind an "enum" type field. After the form container is bound to the data model, the enum-multiple selection in the model will be automatically rendered as a multiple selection component, allowing users to select multiple data items. The default selected value (when configuring, enter the option value, not the option name) and component size (effective on PC, not on mobile) can be configured.

  2. Supports personalized configuration of titles, including title content, alignment, line break settings (when enabled, titles exceeding one line will wrap; when disabled, titles exceeding one line will display with ellipsis), title position, width, and title tooltip.

Image 1f8c441408179cfb9ab45a9ad2ad3e72
  1. Supports personalized configuration of options, including the tooltip below options, layout direction, and whether to display underlines on mobile devices.
Image bfe0ce74615f3c85cadf5a90815067d6

Note:

  • The multi-select component supports both horizontal and vertical layout directions for options, with vertical as the default. When horizontal is chosen, options will wrap automatically based on their length.
  • The multi-select component supports configuring multiple default selected values.
  • If a component is within a form container, its size, title alignment, position, line wrapping, and width will default to the property configuration of the form container

To learn more about form component usage scenarios, refer to the Form Common Scenario Practice Guide

Extended Scenarios Description​

Generating Dynamic Option Lists via Query​

Using class data as an example, configure a dynamic option list for the component.

  1. Create a class data model with a class name field.

    Image 32db67c80574f3b6e048f56d1da2d459

  2. In the Data Management Backend, enter sample values for several classes in this model (note the data environment in the top-left corner of the backend: trial data is only available in the editor development preview and trial version applications; for production applications, formal data must be entered in advance)

    Image 495962a306ad3bd0a37615d9e6d63d94

  3. In the code area at the bottom left of the editor, click the '+' to create a new WeDa data table query. After completing the configuration below, click the save button in the top right corner.

    1. Data table: select the previously created class model.

    2. Trigger Method: Select to automatically execute when input parameters change (executes automatically once upon page load to retrieve relevant data)

    3. Filter conditions, sorting methods: Can be configured as needed or left blank Image 2ffdaddd204e574f5e59b08f5d5ac464 Image 187a83afeb2857cf63639ed42334aef7

  4. Click the data binding mode button "fx" on the right of the component options properties to open the expression input.

$w.query1.data?.records?.map((item) => {
  return {
    value: value: item._id, // use the data ID as the option value
    label: label: item.bjmc // use the class name as the label displayed for the option
  };
});
  1. After completing the above configuration, the component's option list can load and display data from the data model, achieving dynamic control of the option list.

Example​

Interactive Preview​

Different Types of Multiple Choice​

Style API Custom Styles​

#wd-page-root .wd-form-item .wd-checkbox-wrap.checkbox1 .wd-checkbox-label {
  color: green;
}
#wd-page-root .wd-form-item .wd-checkbox-wrap.checkbox2 .wd-checkbox-label {
  color: red;
}

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Display HeadlineslabelVisibleboolean

Default value: true

Title alignmentlabelAlignstring

In the scenario, the form by default follows the title alignment configuration of the form container.

Line break in headinglabelWrapboolean

If the title content is too long when closed, show one line with overflow omitted; when enabled, show with line breaks. In form scenarios, it follows the form container's title line break configuration by default.

Title positionlayoutstring

Set title display position in form component. In the scenario, it follows the title position configuration of the form container by default.

Title widthlabelWidthstring

You can enter a value with units such as px or %, for example: 200px.

In the scenario, the form follows the title width configuration of the form container by default.

Heading NotelabelTipsstring

Take effect on PC/H5

Configure tooltip content for the heading

Prompt.extrastring

Prompt content is displayed below the component after configuration.

Arrangement modedirectionstring

Example: "vertical"

Display underscore on mobile terminalborderedH5boolean

After closing, the mobile terminal does not show the bottom underline

Example: true

Status.statusstring

Example: "edit"

Requiredrequiredboolean

Enable required for this component, value cannot be empty

Example: false

Required identifierrequiredFlagboolean

Enabled, the component will display a required asterisk tag if mandatory.

Example: true

Required validation noterequiredMsgstring

Enable required, prompting message when component value is empty

Example: "该项为必填项"

Bound fieldnamestring

The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.

Title content.labelstring

Example: "标题"

Optionrangearray

Option List

Example: [ { "label": "选项1", "value": "1" }, { "label": "选项2", "value": "2" } ]

selected valuevaluearray

Default selected option

Example: []

Component size(PC)sizestring

Multi-option component width, takes effect on PC only

Example: ""

OptiontipBlockstring

Example: ""

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
value changechangeobject
  • value: array

    多选组件选中值
    • string
Compatible with all platforms

-

Properties API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
Bound fieldnamestring

The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.

Title content.labelstring
selected valuevaluearray

Default selected option

Requiredrequiredboolean

Enable required for this component, value cannot be empty

Indicates whether to displayvisibleboolean

Whether to display the component

Whether to disabledisabledboolean

Component Disabled

Specify whether it is read-only or not.readOnlyboolean

Whether the component is read-only

Select Item NameselectedLabelstring

Selected Item Text Name

selected itemitemarray

selected item object

Method API​

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
set valuesetValuearray值

使用多选组件的设置值方法时，值需要为数组格式。示例：[1,2]，其中1和2对应多选组件的选项值
  • stringvalue

通过 $w.id1.setValue("weda") 设置组件值

Show/Hide SettingssetVisibleboolean显示

Set the component to hidden via $w.id1.setVisible(false)

Set DisabledsetDisabledboolean禁用

Set the component to disabled with $w.id1.setDisabled(true)

Clear valueclearValue

Clear the component value with $w.id1.clearValue()

Set as read-onlysetReadOnlyboolean只读

Set the component to read-only via $w.id1.setReadOnly(true)

Trigger validationhandleValidate

Validate the component value via $w.id1.handleValidate()

Clear verificationclearValidate

Clear component validation via $w.id1.clearValidate()

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
root element.wd-checkbox-rootOutermost component element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-checkbox-root {
  /* Write CSS styles here */
}
H5 root element.wd-h5-checkbox-rootSettable root element style for the H5 side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-checkbox-root {
  /* Write CSS styles here */
}
PC-side root element.wd-pc-checkbox-rootSettable root element style for the PC side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-checkbox-root {
  /* Write CSS styles here */
}
Mini program root element.wd-mp-checkbox-rootSettable root element style for mini program
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-checkbox-root {
  /* Write CSS styles here */
}
Component title style.wd-checkbox-root .wd-form-item-wrap__labelComponent title element

:scope .wd-form-item-wrap__label {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
form control root node style.wd-checkbox-root .wd-form-item-wrap__controlSet form control root element style

:scope .wd-form-item-wrap__control {
  font-size: 20px;
  color: gray;
  padding: 0;
  display: flex;
  align-items: center;
}
multi-select control group root node style.wd-checkbox-root .wd-checkbox-groupmulti-select control group root node style

      :scope .wd-checkbox-group {
        font-size: 20px;
        color: gray;
      }
multi-select control single item root node style.wd-checkbox-root .wd-checkbox-wrapmulti-select control single item root node style

      :scope .wd-checkbox-wrap {
        font-size: 20px;
        color: gray;
      }
Option style in editing status.wd-checkbox-root .wd-checkbox-labelOption style in editing status

      :scope .wd-checkbox-label {
        font-size: 20px;
        color: gray;
      }
Button style in editing status (selected).wd-checkbox-root .is-checked .wd-checkbox-inner::afterButton style in editing status (selected)

      :scope .is-checked .wd-checkbox-inner::after {
        border-color: red;
      }
Editing status - Unselected button style.wd-checkbox-root .wd-checkbox-inner::afterEditing status - Unselected button style

      :scope .wd-checkbox-inner::after {
        border-color: gray;
      }
Editing status - Button background color.wd-checkbox-root .wd-checkbox-innerEditing status - Button background color

      :scope .wd-checkbox-inner {
        background-color: lightgray;
        border-color: lightgray;
      }
Editing status - Verification information.wd-checkbox-root .wd-g-text-errorSet component verification information style

:scope .wd-g-text-error {
    font-size: 20px;
    color: gray;
  }
prompt text.wd-checkbox-root .wd-form-item__help-textSet the text style of the component prompt

:scope .wd-form-item__help-text {
    font-size: 20px;
    color: gray;
  }
Disabled state - Option style.wd-checkbox-root .is-disabled .wd-checkbox-labelDisabled state - Option style

      :scope .is-disabled .wd-checkbox-label {
        font-size: 20px;
        color: gray;
      }
Disabled state - Selected button style.wd-checkbox-root .is-disabled.is-checked .wd-checkbox-inner::afterDisabled state - Selected button style

      :scope .is-disabled.is-checked .wd-checkbox-inner::after {
        border-color: red;
      }
Disabled state - Unselected button style.wd-checkbox-root .is-disabled .wd-checkbox-inner::afterDisabled state - Unselected button style

      :scope .is-disabled .wd-checkbox-inner::after {
        border-color: gray;
      }
Disabled - Button background color.wd-checkbox-root .is-disabled .wd-checkbox-innerDisabled - Button background color

      :scope .is-disabled .wd-checkbox-inner {
        background-color: lightgray;
        border-color: lightgray;
      }
read-only status - form value style.wd-checkbox-root .wd-form-item__readonly-valueSet component read-only status

:scope .wd-form-item__readonly-value {
    font-size: 20px;
    color: gray;
  }

Learn about Style API

Version Changes​

  • Property Changes
  • Style Changes
  • widget api Changes