Skip to main content
Supported Regions:上海

Numeric Input

WdInputNumber

Applicable Scenarios​

For numeric content input.

Example​

Interactive Preview​

Component Decoration​

Component Size​

Component Alignment​

Component Input State​

Component Style API Example​

#wd-page-root .wd-form-item .wd-input-number-input-number {
  border-color: cyan;
  color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}
#wd-page-root .wd-form-item .wd-input-number-btn {
  border-color: cyan;
  color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}`

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

Data formatformatstring

Provide two data formats: numeric value and percentage.

Default value: "number"

number of decimal placesdecimalsnumber

Number of decimal places retained, only allow 0 and positive integer, default not limited

Display thousand separatorthousandShowboolean

When enabled, separate every three digits of an integer with a comma.

Adjust step sizestepnumber

Control the value to add/decrease with each click of the adjust button

Example: 1

Display clear buttonclearableboolean

Enabled, quick clear button is provided by

Default value: true

Example: false

Prefix textbeforestring

The input box in the form displays the prefix text.

suffix textafterstring

Display suffix text in the form input box

Prefix icon typeprefixTypestring

Select icon type

Example: ""

Prefix iconprefixIconstring

Show icon before the form input box

Example: "success"

Prefix iconprefixSrcstring

Set custom icon address

suffix icon typesuffixTypestring

Select icon type

Example: ""

suffix iconsuffixIconstring

Show icon in the form input box

Example: "success"

suffix iconsuffixSrcstring

Set custom icon address

Prompt.extrastring

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

automatically obtain focusfocusboolean

After enabled, the cursor automatically positions to the input box when page loading completes.

Display underscore on mobile terminalborderedH5boolean

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

Default value: true

Display input border on PCborderedPcboolean

After closing, do not display input border on PC

Default value: true

Minimum valueminnumber

Limit the minimum value of the entered number. Default not limited.

Maximum valuemaxnumber

Limit the maximum value of the entered number. Default not limited.

Status.statusstring

Example: "edit"

Requiredrequiredboolean
Required validation noterequiredMsgstring

Example: "该项为必填项"

Required identifierrequiredFlagboolean

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

Default value: true

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.

Example: ""

input valueinputValuenumber

The initialization value is converted based on size limit, number of decimal places, and data format.

Placeholder textplaceholderstring

Example: "请输入"

Numeric value adjustment methodstepOptionstring

Adjustments on the right take effect only on PC and display as an ordinary input box on mobile terminal.

Provide two style modes: bilateral adjustment (both) and right adjustment (right), for adjusting numeric value by step size.

Default value: "right"

PC component dimensionsizestring

Size configuration is only applicable to PC and takes effect by default in form container scenarios.

Title content.labelstring

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: number

    输入值
Compatible with all platforms

When the user modifies the value, the component triggers upon losing focus, and the final value is obtained after calculation.

user inputinputobject
  • value: number

    输入值
Compatible with all platforms

Trigger on user input value, the calculated value is obtained

focusfocusobject
  • value: number

    输入值
Compatible with all platforms

-

Out of focusblurobject
  • value: number

    输入值
Compatible with all platforms

-

Purge contentclearobject
  • originValue: number

    输入被清除前的值
Compatible with all platforms

-

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
Data formatformatstring

Provide two data formats: numeric value and percentage.

Prefix textbeforestring

The input box in the form displays the prefix text. In the form submission scenario, the prefix text is submitted as part of the form content to the data model.

suffix textafterstring

The input box in the form displays suffix text. In the scenario of form submission, the suffix text is submitted as form content to the data model together.

Adjust step sizestepnumber

Control the value to add/decrease with each click of the adjust button

Requiredrequiredboolean
Minimum valueminnumber

Limit the minimum value of the entered number. Default not limited.

Maximum valuemaxnumber

Limit the maximum value of the entered number. Default not limited.

input valuevaluenumber
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

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 valuesetValuenumber值

Set the component value with $w.id1.setValue(123)

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-input-number-rootOutermost component element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-input-number-root {
  /* Write CSS styles here */
}
H5 root element.wd-h5-input-number-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-input-number-root {
  /* Write CSS styles here */
}
PC-side root element.wd-pc-input-number-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-input-number-root {
  /* Write CSS styles here */
}
Mini program root element.wd-mp-input-number-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-input-number-root {
  /* Write CSS styles here */
}
Component title style.wd-input-number-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-input-number-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;
}
Input box style - editing status.wd-input-number-root .wd-form-input-wrapComponent border, margin style, background color, font size, font color

:scope .wd-form-input-wrap {
  font-size: 20px;
  color: gray;
  text-align: right;
  height: 40px;
  width: 100%;
  background-color: lightgray;
  border-width: 2px;
  border-color: gray;
  border-radius: 0px;
}
Editing status - Input box style (gain focus).wd-input-number-root .wd-form-input-wrap.is-focusedEditing status - Input box style (gain focus)

:scope .wd-form-input-wrap.is-focused {
  background-color: lightgray;
  border-color: gray;
}
Editing status - Placeholder text style.wd-input-number-root input::placeholder, .wd-input-number-root .weui-input__placeholderSet placeholder text style

:scope input::placeholder, :scope .weui-input__placeholder {
  color: lightgray;
}
Editing status - Verification information.wd-input-number-root .wd-g-text-errorSet component verification information style

:scope .wd-g-text-error {
    font-size: 20px;
    color: gray;
  }
prompt text.wd-input-number-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 - Input box style.wd-input-number-root .wd-form-input-wrap.is-disabledComponent disabled style

:scope .wd-form-input-wrap.is-disabled {
    font-size: 20px;
    color: gray;
    text-align: right;
    height: 40px;
    width: 200px;
    background-color: lightgray;
    border-width: 2px;
    border-color: gray;
    border-radius: 10px;
  }
read-only status - form value style.wd-input-number-root .wd-form-item__readonly-valueSet component read-only status

:scope .wd-form-item__readonly-value {
    font-size: 20px;
    color: gray;
  }
Prefix text style.wd-input-number-root .wd-form-input-group__addon-leftSet component prefix text style

:scope .wd-form-input-group__addon-left {
    font-size: 20px;
    color: gray;
    height: 40px;
    background-color: lightgray;
  }
/* 仅PC端生效 */
:scope.wd-pc-input-number-root .wd-form-input-group__addon-left {
    border-width: 2px;
    border-color: gray;
    border-radius: 10px 0 0 10px;
}
Suffix text style.wd-input-number-root .wd-form-input-group__addon-rightSet component suffix text style

:scope .wd-form-input-group__addon-right {
    font-size: 20px;
    color: gray;
    height: 40px;
    background-color: lightgray;
  }
/* 仅PC端生效 */
:scope.wd-pc-input-number-root .wd-form-input-group__addon-right {
    border-width: 2px;
    border-color: gray;
    border-radius: 10px 0 0 10px;
}
Number input with minus button on the left.wd-input-number-btn__beforeNumber input with minus button on the left
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number-btn__before {
  /* Write CSS styles here */
}
Number input with button on the right.wd-input-number-btn__afterNumber input with button on the right
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number-btn__after {
  /* Write CSS styles here */
}
Number input with number on the right and button.wd-input-number__increaseNumber input with number on the right and button
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number__increase {
  /* Write CSS styles here */
}
Decrease button for the number on the right.wd-input-number__decreaseDecrease button for the number on the right
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-input-number__decrease {
  /* Write CSS styles here */
}

Learn about Style API