EccUtilsDesignInput Component
Overview
The ecc-utils-design-input component is a versatile, styled text field for form data entry. It supports various input types, placeholder text, and disabled states.
This component is a wrapper around the native HTML <input> element, providing consistent styling and custom events.
Usage
Basic Input
This example shows a default text input field.
Input with Label
This example shows an input field associated with a label.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
type | string | "text" | The type of input (e.g., text, email). |
placeholder | string | "" | Placeholder text for the input. |
value | string | "" | The current value of the input. |
disabled | boolean | false | When true, disables the input. |
type
Specifies the input type, determining the data format and keyboard layout on mobile devices.
<EccUtilsDesignInput type="password" />placeholder
Provides a hint to the user about what information to enter in the input field.
<EccUtilsDesignInput placeholder="Your email address" />value
The current value of the input field. Can be used for controlled components in React.
<EccUtilsDesignInput value="pre-filled.value@example.com" />disabled
When true, the input is non-interactive and visually de-emphasized.
<EccUtilsDesignInput disabled={true} />Events
| Event Name | React Event Name | Detail Type | Description |
|---|---|---|---|
ecc-input-changed | onEccInputChanged | { value: string } | Fired when the value of the input changes. |
ecc-input-changed
Fires whenever the user types or pastes content into the input.
<EccUtilsDesignInput
onEccInputChanged={(event) => {
console.log(event.detail.value);
}}
/>
