scoped
Input element rozširuje možnosti štandardného HTML inputu pokročilými funkciami a možnosťami prispôsobenia.
Input podporuje aj vizuál štandardného HTML inputu pridaním vlastnosti variant s hodnotou standard.
V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.
V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.
V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.
| 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. |