<dy-input>
A versatile input component that supports various input types and features like data lists, clearable inputs, and number inputs. It provides a consistent and accessible way to collect user input with built-in validation and formatting options.
Example
Loading...
<dy-input
.value=${"Option"}
@change=${(evt) => evt.target.value = evt.detail}
.dataList=${[{"label":"Option1"},{"label":"Option2"}]}></dy-input> <dy-input
.placeholder=${"Your name"}
.clearable=${true}
@clear=${(evt) => evt.target.value = null}
@change=${(evt) => evt.target.value = evt.detail}></dy-input> <dy-input
.type=${"number"}
.value=${1}
@change=${(evt) => evt.target.value = evt.detail}></dy-input> <dy-input .value=${"mantou"} .disabled=${true}></dy-input>
API
DuoyunInputElement
Extends TapInputElement
TapInputElement
Shadow DOM; Extends GemElement
TapInputElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
change |
Emitter<string> |
|
clear |
Emitter<string> |
|
name(name) |
Yes | string |
value(value) |
Yes | string |
type(type) |
Yes | 'search' | 'password' | 'email' | 'url' | 'tel' | 'text' | 'textarea' | 'number' |
placeholder(placeholder) |
Yes | string |
spellcheck(spellcheck) |
Yes | boolean |
required(required) |
Yes | boolean |
disabled(disabled) |
Yes | boolean |
readonly(readonly) |
Yes | boolean |
autofocus(autofocus) |
Yes | boolean |
clearable(clearable) |
Yes | boolean |
alwayclearable(alwayclearable) |
Yes | boolean |
rows(rows) |
Yes | number |
step(step) |
Yes | number |
min(min) |
Yes | number |
max(max) |
Yes | number |
dataList |
Yes | DataList |
icon |
Yes | string | Element | DocumentFragment |
TapInputElement Other
| Type | Value |
|---|---|
| Event | change, clear |
| Part | input, clear |
| CSS State | filled, composing |
DuoyunInputGroupElement
Extends TapInputGroupElement
TapInputGroupElement
Extends GemElement