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. |
| 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 | '' |
| Description | Variant of the element appearance. Possible values: 'default', 'standard'. |
| Attribute | Option |
| Type | string |
| Default | 'default' |
| Name | Description |
|---|
wje-input:input | Called whenever the input value changes. |
wje-input:clear | Called after clearing the contents of the input field using the clear button. |
| Description | Propagates the validation status of the input and sets the 'invalid' attribute according to validity. |
| Signature | propagateValidation() => void |
| Description | Validates the input field value according to the defined rules and updates the validity status. |
| Signature | validateInput() => void |
| Name | Description |
|---|
clear | Button to clear the contents of the input field. |
end | The content that appears at the end of the input field. |
error | Element for displaying the error message. |
input | Native HTML input element. |
label | Element for input field label. |
native | Container of the entire input field. |
start | The content that appears at the beginning of the input field. |
wrapper | Enclosing element for the input field and its accessories. |
| Name | Description |
|---|
--wje-input-background-color | Input field background colour |
--wje-input-border-radius | Rounding the corners of the input field |
--wje-input-border-width | Width of the edge of the input field |
--wje-input-border-style | Input field border style |
--wje-input-border-color | Input field border colour |
--wje-input-border-color-focus | Colour of the input field edge when aiming |
--wje-input-color | Input field text colour |
--wje-input-color-invalid | Text colour for invalid value |
--wje-input-font-family | Input field font family |
--wje-input-line-height | Input field text line height |
--wje-input-margin-bottom | Bottom edge of the input field |
| Name | Description |
|---|
start | The content that appears at the beginning of the input field. |
end | The content that appears at the end of the input field. |
error | Custom content to display the error message. |