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

DescriptionActivates the option to display a custom error message. The message property is used to set it.
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''

Option

DescriptionVariant of the element appearance. Possible values: 'default', 'standard'.
AttributeOption
Typestring
Default'default'

Eventy

NameDescription
wje-input:inputCalled whenever the input value changes.
wje-input:clearCalled after clearing the contents of the input field using the clear button.

Metódy

propagateValidation

DescriptionPropagates the validation status of the input and sets the 'invalid' attribute according to validity.
SignaturepropagateValidation() => void

validateInput

DescriptionValidates the input field value according to the defined rules and updates the validity status.
SignaturevalidateInput() => void

CSS Shadow Parts

NameDescription
clearButton to clear the contents of the input field.
endThe content that appears at the end of the input field.
errorElement for displaying the error message.
inputNative HTML input element.
labelElement for input field label.
nativeContainer of the entire input field.
startThe content that appears at the beginning of the input field.
wrapperEnclosing element for the input field and its accessories.

CSS Custom Vlastnosti

NameDescription
--wje-input-background-colorInput field background colour
--wje-input-border-radiusRounding the corners of the input field
--wje-input-border-widthWidth of the edge of the input field
--wje-input-border-styleInput field border style
--wje-input-border-colorInput field border colour
--wje-input-border-color-focusColour of the input field edge when aiming
--wje-input-colorInput field text colour
--wje-input-color-invalidText colour for invalid value
--wje-input-font-familyInput field font family
--wje-input-line-heightInput field text line height
--wje-input-margin-bottomBottom edge of the input field

Sloty

NameDescription
startThe content that appears at the beginning of the input field.
endThe content that appears at the end of the input field.
errorCustom content to display the error message.