Input: extension of the standard Input element
scoped
Input element extends the capabilities of standard HTML input with advanced features and customization options.
Input also supports the visual of standard HTML input by adding the variant property with the value standard.
In combination with the Button elementorm, it creates a full-featured search box.
In combination with the Button elementorm, it creates a full-featured search box.
In combination with the Button elementorm, it creates a full-featured search box.
| Description | If true, it will allow the contents of the input to be cleared using the button. |
| Attribute | clearable |
| Type | boolean |
| Default | false |
| Description | Activates the option to display a custom error message. The message property is used to set it. Deprecated |
| Attribute | custom-error-display |
| Type | boolean |
| Default | undefined |
| Description | If true, disables the ability to interact with the input |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | Defines the descriptive text of the input. |
| Attribute | label |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Defines the maximum numeric value in the input (must not be less than its minimum value - the min attribute). |
| Attribute | max |
| Type | number ｜ string ｜ undefined |
| Default | undefined |
| Description | Specifies the maximum number of characters the user must enter (Valid for inputs of type text, email, search, password, tel, or url). |
| Attribute | maxlength |
| Type | number ｜ undefined |
| Default | undefined |
| Description | Defines the minimum numeric value in the input (must not be less than its minimum value - the min attribute). |
| Attribute | min |
| Type | number ｜ string ｜ undefined |
| Default | undefined |
| Description | Specifies the minimum number of characters the user must enter (Valid for inputs of type text, email, search, password, tel or url). |
| Attribute | minlength |
| Type | number ｜ undefined |
| Default | undefined |
| Description | Defines the text of the custom error message. |
| Attribute | message |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Regex by which the value is checked. The pattern must correspond to the whole value, not just part of it. Use the title attribute to describe the pattern to help the user. This attribute is used if the attribute value is of type "text", "search", "tel", "url", "email", "date" or "password", otherwise it is ignored. If the attribute type is "date", pattern will only be used in browsers that do not support the "date" input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. |
| Attribute | pattern |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Defines the input placeholder text. |
| Attribute | placeholder |
| Type | string ｜ undefined |
| Default | undefined |
| Description | If true, disables the ability to write to the input |
| Attribute | readonly |
| Type | boolean |
| Default | false |
| Description | If true, sets the input as mandatory for completion. |
| Attribute | required |
| Type | boolean |
| Default | false |
| Description | Sets the input type. |
| Attribute | type |
| Type | "email" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" |
| Default | 'text' |
| Description | If true, sets the validation of the input content after each change is made. |
| Attribute | validate-on-change |
| Type | boolean |
| Default | false |
| Description | Input value. |
| Attribute | value |
| Type | null ｜ number ｜ string ｜ undefined |
| Default | '' |
| Name | Description |
|---|
Clear | Called when the Clear button is clicked. |
Input | The wj-input:input event is fired whenever the user changes the input value. This usually happens every time a key is pressed while the user is typing. |
No public methods available for this component.
| Name | Description |
|---|
input | Refers to the input element inside the Input. |
native | Refers to the div element inside the Input. |
| Name | Description |
|---|
--wj-input-background-color | Input background colour |
--wj-input-border-color | Input edge colour |
--wj-input-border-color-focus | Input edge colour at focuse |
--wj-input-border-radius | Rounding the edges of the Input |
--wj-input-border-style | Input border style |
--wj-input-border-width | Input edge width |
--wj-input-color-invalid | Input error message colour |
--wj-input-font-family | Font used in Input |
--wj-input-line-height | Input line heights |
--wj-input-margin-bottom | Lower Input Gap |
--wj-input-slot-padding-inline | Horizontal gap between Input slots |
--wj-padding-bottom | Lower Input Internal Offset |
--wj-padding-end | Right Input internal offset in LTR, and left in RTL |
--wj-padding-start | Left Input internal offset in LTR, and right in RTL |
--wj-padding-top | Upper Input internal offset |
| Name | Description |
|---|
end | The content is displayed to the right of the input in the LTR and to the left in the RTL as a new section. |
start | The content is placed to the left of the input in the LTR and to the right in the RTL in the form of a new section. |