Input

scoped

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

Basic usage

This example shows a plain input in its most common setup, so the default markup, spacing, and typing behavior are easy to inspect.

Use in the form

This example places the input inside a real form so you can see submission flow and standard form interaction in context.

Variant: standard

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

Standard in the form

This example combines the standard input variant with a form context so it is clear how it behaves in a typical form layout.

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

clearable

Description	Sets or removes the 'clearable' attribute on the element. When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.
Attribute	clearable
Type	boolean
Default	false

customErrorDisplay

Description	Getter for the customErrorDisplay attribute.
Attribute	custom-error-display
Type	boolean
Default	false

disabled

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

errorInline

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

invalid

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

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
Default	false

message

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

name

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

placeholder

Description	Sets the placeholder value for an element. If the provided value is non-empty, it assigns the value to the "placeholder" attribute. Otherwise, it removes the "placeholder" attribute from the element.
Attribute	placeholder
Type	string
Default	-

readonly

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

required

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

type

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

validateOnChange

Description	Sets the validateOnChange property. If set to a truthy value, it adds the validate-on-change attribute to the element. If set to a falsy value, it removes the validate-on-change attribute from the element.
Attribute	validate-on-change
Type	boolean
Default	false

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	-

variant

Description	Sets the variant attribute on the element. If a value is provided, it will set the attribute to the given value. If no value is provided, it removes the variant attribute from the element.
Attribute	variant
Type	string
Default	default

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.