Skip to main content

Input

scoped

Input element rozširuje možnosti štandardného HTML inputu pokročilými funkciami a možnosťami prispôsobenia.

Základné použitie

Použitie vo formulári

Variant: standard

Input podporuje aj vizuál štandardného HTML inputu pridaním vlastnosti variant s hodnotou standard.

Standard vo formulári

V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.

Pickers

V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.

Clearable

V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.

Atribúty a Vlastnosti

clearable

DescriptionIf true, it will allow the contents of the input to be cleared using the button.
Attributeclearable
Typeboolean
Defaultfalse

custom-error-display (deprecated)

DescriptionActivates the option to display a custom error message. The message property is used to set it. Deprecated
Attributecustom-error-display
Typeboolean
Defaultundefined

disabled

DescriptionIf true, disables the ability to interact with the input
Attributedisabled
Typeboolean
Defaultfalse

label

DescriptionDefines the descriptive text of the input.
Attributelabel
Typestring | undefined
Defaultundefined

max

DescriptionDefines the maximum numeric value in the input (must not be less than its minimum value - the min attribute).
Attributemax
Typenumber | string | undefined
Defaultundefined

maxlength

DescriptionSpecifies the maximum number of characters the user must enter (Valid for inputs of type text, email, search, password, tel, or url).
Attributemaxlength
Typenumber | undefined
Defaultundefined

min

DescriptionDefines the minimum numeric value in the input (must not be less than its minimum value - the min attribute).
Attributemin
Typenumber | string | undefined
Defaultundefined

minlength

DescriptionSpecifies the minimum number of characters the user must enter (Valid for inputs of type text, email, search, password, tel or url).
Attributeminlength
Typenumber | undefined
Defaultundefined

message

DescriptionDefines the text of the custom error message.
Attributemessage
Typestring | undefined
Defaultundefined

pattern

DescriptionRegex 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.
Attributepattern
Typestring | undefined
Defaultundefined

placeholder

DescriptionDefines the input placeholder text.
Attributeplaceholder
Typestring | undefined
Defaultundefined

readonly

DescriptionIf true, disables the ability to write to the input
Attributereadonly
Typeboolean
Defaultfalse

required

DescriptionIf true, sets the input as mandatory for completion.
Attributerequired
Typeboolean
Defaultfalse

type

DescriptionSets the input type.
Attributetype
Type"email" | "number" | "password" | "search" | "tel" | "text" | "url"
Default'text'

validate-on-change

DescriptionIf true, sets the validation of the input content after each change is made.
Attributevalidate-on-change
Typeboolean
Defaultfalse

value

DescriptionInput value.
Attributevalue
Typenull | number | string | undefined
Default''

Eventy

NameDescription
ClearCalled when the Clear button is clicked.
InputThe 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.

Metódy

No public methods available for this component.

CSS Shadow Parts

NameDescription
inputRefers to the input element inside the Input.
nativeRefers to the div element inside the Input.

CSS Custom Vlastnosti

NameDescription
--wj-input-background-colorInput background colour
--wj-input-border-colorInput edge colour
--wj-input-border-color-focusInput edge colour at focuse
--wj-input-border-radiusRounding the edges of the Input
--wj-input-border-styleInput border style
--wj-input-border-widthInput edge width
--wj-input-color-invalidInput error message colour
--wj-input-font-familyFont used in Input
--wj-input-line-heightInput line heights
--wj-input-margin-bottomLower Input Gap
--wj-input-slot-padding-inlineHorizontal gap between Input slots
--wj-padding-bottomLower Input Internal Offset
--wj-padding-endRight Input internal offset in LTR, and left in RTL
--wj-padding-startLeft Input internal offset in LTR, and right in RTL
--wj-padding-topUpper Input internal offset

Sloty

NameDescription
endThe content is displayed to the right of the input in the LTR and to the left in the RTL as a new section.
startThe 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.