Skip to main content
Supported Regions:上海

Label Selection

WdTagSelect

Applicable Scenarios​

Multiple tags are displayed side by side, supporting both single and multiple selection.

Other Scenario Practices​

Refer to the Form Scenario Practice Guide to learn about various supported scenarios and implementation solutions for forms.

Making Selection Non-Cancellable via Styles​

.wd-tag-item.is-selected {
  pointer-events: none;
}

Example​

Interactive Preview​

Component Input State​

Tag Style​

Style API Example​

#wd-page-root .wd-form-item.wd-tag-select-root .wd-tag-item {
  border: 3px solid #0052d950;
}

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.

Example: "vertical"

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

The prompt content is displayed below the input box after configuration.

Arrangement modedirectionstring

Default value: "inline"

tag typetagStyleTypestring

Example: "light"

Selected tag colortagStyleColorstring

Default value: "#0052d9"

Tag rounded cornerstagStyleRadiusstring
Mobile terminal tag widthtagStyleWidthTypestring

Default is Adaptive Width, valid only in H5/mini program

Default value: "flex"

Number of tag columns in mobile terminaltagStyleWidthColsnumber

Valid only in H5/Mini Program

Example: 4

Tag spacingtagStyleSpacestring

Default value: "md"

Display underscore on mobile terminalborderedH5boolean

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

Default value: true

Example: false

Status.statusstring

Example: "edit"

Requiredrequiredboolean
Required identifierrequiredFlagboolean

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

Default value: true

Required validation noterequiredMsgstring

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" }, { "label": "标签 3", "value": "3" } ]

Selection methodcheckTypestring

Default value: "checkbox"

Default selected tagvalue

Single selection type is text, multiple selection type is array, get via $w.componentID.value

Example: [ "1" ]

Component sizesizestring

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:

    输入值
Compatible with all platforms

Trigger when a user modifies a component value

Property 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
Optionrangearray

Option List

Default selected tagvalue
Requiredrequiredboolean
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 valuesetValuestring值

通过 $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-tag-select-rootOutermost component element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-tag-select-root {
  /* Write CSS styles here */
}
H5 root element.wd-h5-tag-select-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-tag-select-root {
  /* Write CSS styles here */
}
PC-side root element.wd-pc-tag-select-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-tag-select-root {
  /* Write CSS styles here */
}
Mini program root element.wd-mp-tag-select-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-tag-select-root {
  /* Write CSS styles here */
}
Component title style.wd-tag-select-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-tag-select-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;
}
Editing status - Verification information.wd-tag-select-root .wd-g-text-errorSet component verification information style

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

:scope .wd-form-item__help-text {
    font-size: 20px;
    color: gray;
  }

Learn about Style API