Input

scoped

Input element extends the capabilities of standard HTML input with advanced features and customization options.

Basic usage

Use in the form

Variant: standard

Input also supports the visual of standard HTML input by adding the variant property with the value standard.

Standard in the form

Search

In combination with the Button elementorm, it creates a full-featured search box.

Pickers

In combination with the Button elementorm, it creates a full-featured search box.

Clearable

In combination with the Button elementorm, it creates a full-featured search box.

When to use

Use wje-input when users need to enter values, choose options, or trigger form-related actions.

When not to use

Do not use it as a decorative element without interaction. Prefer presentational components in that case.

Accessibility

Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.

Best Practices

• Keep validation rules and error behavior consistent across the entire form.
• Show loading or disabled states during async operations.
• Split complex forms into smaller sections with immediate feedback.

Attributes and Properties

type

Description	Sets the input type that controls value parsing and validation.
Attribute	type
Type	any
Default	-

value

Description	Retrieves the value from the input element if available; otherwise, returns the internal _value property or an empty string as the default.
Attribute	value
Type	string
Default	-

name

Description	Sets the field name used when submitting form data.
Attribute	name
Type	any
Default	-

disabled

Description	Disables user interaction with the component.
Attribute	disabled
Type	any
Default	-

placeholder

Description	Retrieves the value of the 'placeholder' attribute from the element. If the attribute is not set, it returns an empty string.
Attribute	placeholder
Type	string
Default	-

label

Description	Retrieves the value of the 'label' attribute if it exists. If the 'label' attribute is not set, it returns false.
Attribute	label
Type	string｜boolean
Default	-

message

Description	Sets helper or validation text shown below the input.
Attribute	message
Type	any
Default	-

errorInline

Description	Controls whether validation errors are rendered inline.
Attribute	error-inline
Type	any
Default	-

required

Description	Marks the component as required for form validation.
Attribute	required
Type	any
Default	-

readonly

Description	Prevents the value from being edited by the user.
Attribute	readonly
Type	any
Default	-

invalid

Description	Controls validation or status messaging for invalid.
Attribute	invalid
Type	boolean
Default	false

Events

Name	Description
wje-input:input	Dispatched when the input value changes.
wje-input:clear	Dispatched when the input is cleared.

Methods

hasSlot

Description	Checks whether the input has a slot.
Signature	(el: HTMLElement, slotName: string) => boolean

CSS Shadow Parts

Name	Description
native	The native part.
wrapper	The wrapper part.
input	The input part.
clear	The clear part.

CSS Custom Properties

Name	Description
--wje-input-font-family	Defines the font family for the input text.
--wje-input-background-color	Specifies the background color of the input field.
--wje-input-color	Sets the text color within the input field.
--wje-input-color-invalid	Changes the text color when the input value is invalid.
--wje-input-border-color	Defines the border color of the input field.
--wje-input-border-color-focus	Specifies the border color when the input is focused.
--wje-input-border-width	Sets the width of the input border.
--wje-input-border-style	Defines the border style of the input (e.g., solid, dashed).
--wje-input-border-radius	Specifies the border radius, creating rounded corners.
--wje-input-margin-bottom	Adds spacing below the input field.
--wje-input-line-height	Sets the line height of the text within the input field.
--wje-input-slot-padding-inline	Controls the padding on the left and right of the input slot content.

Slots

Name	Description
start	Slot for content at the start of the input.
end	Slot for content at the end of the input.