sling-web-component-input v1.12.5
sling-web-component-input
Install
npm install sling-web-component-input
Tag
<sling-input></sling-input>
Dependencies
- sling-web-framework
sling-web-helpers
Attributes and properties
Name Type Default value ReflectToAttribute Observer callSdk autocomplete String :heavy_check_mark: checked Boolean :heavy_check_mark: disabled Boolean :heavy_check_mark: label String :heavy_check_mark: type String text :heavy_check_mark: formatType max Number :heavy_check_mark: maxlength Number :heavy_check_mark: min Number :heavy_check_mark: minlength Number :heavy_check_mark: name String :heavy_check_mark: pattern String :heavy_check_mark: placeholder String :heavy_check_mark: readonly Boolean :heavy_check_mark: required Boolean :heavy_check_mark: size Number :heavy_check_mark: src String :heavy_check_mark: state String :heavy_check_mark: step Number :heavy_check_mark: validationmessage Object :heavy_check_mark: value String :heavy_check_mark: formatValue
Description
Name | Description |
---|---|
autocomplete | Indicates whether the control value can be automatically completed by the browser, is ignored if value of type attribute is hidden , password , checkbox , radio , file or button type (button , submit , reset , image ). More information on input HTML. |
checked | When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default; otherwise, this attribute is ignored. More information on input HTML. |
disabled | Indicates that form control is not available for interaction. More information on input HTML. |
label | Receives the text that will be used as input label. |
type | The type of control to be displayed. The property receives all the options of a input HTML. |
max | The maximum value (numeric or date) for this item, which should not be less than its minimum value (min attribute).More information on input HTML. |
maxlength | If the value of the type attribute is text ,email , search ,password , tel orurl , this attribute specifies the maximum number of characters (in Unicode code points) that the user can insert. More information on input HTML. |
min | The minimum value (number or date) for this item, which should not be greater than its maximum (max attribute). More information on input HTML. |
minlength | If the value of the type attribute is text ,email , search ,password , tel orurl , this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. More information on input HTML. |
name | The name of the control, which is sent along with the form data. |
oninput | A function that is called when populated the field, it triggers an input event that loads an object with field information. |
pattern | A regular expression used to validate the value of the control. More information on input HTML. |
placeholder | A hint to the user of what he can enter in the control. More information on input HTML. |
readonly | This Boolean attribute indicates that the user can not modify the value of the control. More information on input HTML. |
required | This attribute specifies that the user must fill in the field with a value before submitting the form. More information on input HTML. |
size | The initial size of the control. More information on input HTML. |
src | If the value of the type attribute is image, this attribute specifies a URI for the location of an image to be displayed on the graphic button. More information on input HTML. |
state | Controls the state of input field, its values may vary insuccess warning and error |
step | Works together with min and max attributes to limit increments in which numeric values or dates can be changed. More information on input HTML. |
validationmessage | Receives an object with the validation message from the parent. |
value | The initial value of control. This attribute is optional except when the value of the type attribute is radio or checkbox. More information on input HTML. |
Events
- input
Description: Event triggered when field is populated, has the values and field type as properties.
Details:
Name | Description |
---|---|
value | Value of input field that will be passed to the parent. |
type | Type of input field that will be passed to the parent. |
Examples
All component examples can be emulated using the npm start sling-web-component-input
command.
Use
<sling-input label="Label" placeholder="Placeholder..."></sling-input>
<sling-input label="Disabled" placeholder="Placeholder..." disabled></sling-input>
<sling-input label="Success" placeholder="Placeholder..." state="success"></sling-input>
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago