Introduction

fs-form-input is a form-item content control that can be used standalone or together with fs-form. It supports multiple input types including single-line text, multi-line text, number, telephone, and password. In the Hera Android environment, the number type automatically uses the tel type to provide a better user experience.

Usage

When importing locally, configure it in the page's index.json:

"usingComponents": {
  "fs-form-input": "/avaui-sub/fs-form/fs-form-input/index"
}

When used together with fs-form:

"usingComponents": {
  "fs-form": "/avaui-sub/fs-form/index",
  "fs-form-item": "/avaui-sub/fs-form/fs-form-item/index",
  "fs-form-input": "/avaui-sub/fs-form/fs-form-input/index"
}

PWC (custom component/plugin) usage: only the usingComponents registration uses the avaComponent:// protocol; other usage is the same.

When used standalone:

"usingComponents": {
  "fs-form-input": "avaComponent://avaui-sub/fs-form/fs-form-input/index"
}

Code Demos

1. Basic Usage

Supports single-line text input. Bind a value via value and listen for value changes via the change event. A rounded border can be added via the bordered attribute.

2. Input Types (type attribute)

Supports multiple input types: text (single-line text), textarea (multi-line text), number, tel (telephone), password.

3. Disabled State

Disable the input via the disabled attribute.

4. Used with fs-form

fs-form-input can be used as the content control of an fs-form-item, supporting form validation and data collection.

---

API

fs-form-input Attributes

Parameter	Description	Type	Optional Values	Default
value	Input value	String	—	''
placeholder	Placeholder text	String	—	''
type	Input type	String	text / textarea / number / tel / password	text
disabled	Whether disabled	Boolean	—	false
maxlength	Maximum input length; -1 means no limit	Number	—	-1
bordered	Whether to show a border	Boolean	—	false

fs-form-input Events

Event Name	Description	Callback Parameters
change	Triggered when the input value changes (used for fs-form update and validation)
input	Triggered when the input value changes (forwards the native input event)
focus	Triggered when focus is gained
blur	Triggered when focus is lost

Note: The change and blur events have bubbles: true and composed: true enabled, so they can be captured by fs-form-item for form validation.

---

Design Notes

• The input style follows the design specification and supports CSS variables for custom colors.
• When type is number, non-numeric characters are automatically filtered out, keeping only digits, the decimal point, and the minus sign.
• In the Hera Android environment, the number type is automatically converted to the tel type to provide a better keyboard experience.
• The textarea type supports automatic height adjustment.
• In the disabled state, the text color automatically changes to the disabled color.
• When the bordered attribute is enabled, the input displays a rounded border, suitable for card-style scenarios that need visual distinction.

---

打开预览