EccUtilsDesignInput Component

2.0.0-alpha.6

<ecc-utils-design-input/>

EccUtilsDesignInput

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.
`invalid`	`boolean`	`false`	When `true`, marks the input as invalid (also implied by `error`).
`error`	`string`	`""`	Error message shown under the input, e.g. from an API.

`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} />

`invalid` and `error`

error shows a message under the input, e.g. one that an API returned for this field (see Field errors), and marks the input as invalid: it gets a red border, aria-invalid="true" and aria-describedby pointing to the message, and screen readers announce the message (aria-live="polite"). invalid marks the input as invalid without a message, e.g. when the message is shown elsewhere. Clear both when the user changes the value or submits again. The message has the part error for styling (ecc-utils-design-input::part(error)).

<EccUtilsDesignInput error="Must be a valid URI." />

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);
  }}
/>

Label Checkbox