eds-input-field

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

In Plain HTML

In React

Exposing Events and type=password

The component internally handles the prop controlling whether the component emits value events. Defaults set to true. For security reasons, passwords fields are always suppresed form security.

Plain HTML

To listen to edsInput and edsChange events, use addEventListener on the custom element.

In React

Use onEdsinput and onEdschange props (generated by the Stencil React output target) to listen to events.

Using onInput={(e) => e.target.value} will return undefined because e.target is the custom element, not the internal <input>. Use edsinput or edschange instead.

In Vue

Or..

Here’s how you can directly access the value of your password field in a Vue application:

and in methods you should add:

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`	If `true`, the checkbox/radio is checked.	`boolean`	`undefined`
`disabled`	`disabled`	If `true`, the input is disabled.	`boolean`	`false`
`error`	`error`	If `true`, renders the input with error styles.	`boolean`	`false`
`errorMessage`	`error-message`	Error message text shown when validation fails.	`string`	`undefined`
`exposeValueEvents`	`expose-value-events`	If `true`, emits `edsChange` and `edsInput` events for external usage. Set to `false` to disable value emission entirely.	`boolean`	`true`
`hint`	`hint`	Optional hint displayed next to the label.	`string`	`undefined`
`icon`	`icon`	Optional icon name to display inside the input.	"copy" \| "arrow-right" \| "chevron-right" \| "chevron-left" \| "chevron-down" \| "chevron-up" \| "arrow-left" \| "arrow-up-right" \| "close" \| "add" \| "edit" \| "checkmark" \| "download" \| "upload" \| "view" \| "exit" \| "caretSort" \| "bookmark" \| "createLink" \| "activity" \| "account" \| "analytics" \| "template" \| "documentExport" \| "documentDownload" \| "trashCan" \| "chooseItem" \| "copyLink" \| "dragHorizontal" \| "dragVertical" \| "login" \| "logout" \| "move" \| "replicate" \| "sortAscending" \| "sortDescending" \| "requestQuote" \| "reset" \| "resultDraft" \| "share" \| "play" \| "book" \| "chatOff" \| "forum" \| "shareKnowledge" \| "time" \| "help" \| "customerService" \| "code" \| "rocket" \| "compass" \| "menu" \| "search" \| "settings" \| "notification" \| "user" \| "group" \| "save" \| "document" \| "folder" \| "image" \| "calendar" \| "information" \| "warning" \| "error" \| "checkmark-filled" \| "star" \| "thumbs-up" \| "thumbs-down" \| "twitter" \| "linkedin" \| "facebook" \| "youtube" \| "mastodon" \| "bluesky"	`undefined`
`inputId`	`input-id`	The `id` attribute of the internal input element. Defaults to `name` if not set.	`string`	`undefined`
`label`	`label`	Label text for the input field.	`string`	`undefined`
`link`	–	Optional link associated with the input (for help or docs).	`{ url: string; label: string; }`	`undefined`
`max`	`max`	Maximum value for number or range inputs	`number`	`undefined`
`maxLength`	`max-length`	The maximum allowed length for text input.	`number`	`undefined`
`message`	`message`	Message shown below the input (e.g., additional info or validation message).	`string`	`undefined`
`min`	`min`	Minimum value for number or range inputs	`number`	`undefined`
`name` (required)	`name`	The `name` attribute of the input element. Required for form submission.	`string`	`undefined`
`onChangeNative`	–	Native `onChange` handler for React/Vue wrappers. Enables use without manually attaching DOM event listeners.	`(event: Event) => void`	`undefined`
`onInput`	–	Native `onInput` handler for React/Vue wrappers. Enables use without manually attaching DOM event listeners.	`(event: InputEvent) => void`	`undefined`
`options`	`options`	Options for select, checkbox, radio, or range inputs. Can be a JSON string or an array of `{ value, label }` objects.	`string \| { value: string \| number; label: string; }[]`	`undefined`
`placeholder`	`placeholder`	Placeholder text for the input field.	`string`	`undefined`
`required`	`required`	If `true`, the input is required.	`boolean`	`false`
`step`	`step`	Step value for number or range inputs	`number`	`undefined`
`type`	`type`	Type of the input: e.g., `text`, `checkbox`, `select`, `range`, etc.	`string`	`'text'`
`value`	`value`	The value of the input. Can be `string` or `number`.	`number \| string`	`undefined`

Events

Event	Description	Type
`edschange`	Emits on blur or change event (e.g., selecting an option, leaving the field). Use `event.detail.value` to access the final value.	`CustomEvent<{ value: string \| boolean \| string[]; }>`
`edsinput`	Emits on every user input (key press, typing, etc.). Use `event.detail.value` to access the new value.	`CustomEvent<{ value: string \| boolean \| string[]; }>`

Dependencies

Used by

Depends on

eds-input-label
eds-input
eds-input-select
eds-input-file
eds-input-dropzone
eds-input-search
eds-input-range
eds-input-footer

Graph

graph TD;
  eds-input-field --> eds-input-label
  eds-input-field --> eds-input
  eds-input-field --> eds-input-select
  eds-input-field --> eds-input-file
  eds-input-field --> eds-input-dropzone
  eds-input-field --> eds-input-search
  eds-input-field --> eds-input-range
  eds-input-field --> eds-input-footer
  eds-input --> eds-icon-wrapper
  eds-input-select --> eds-icon-wrapper
  eds-input-search --> eds-icon-wrapper
  eds-input-footer --> eds-icon-wrapper
  eds-input-footer --> eds-link
  eds-link --> eds-icon-wrapper
  eds-form --> eds-input-field
  eds-global-search --> eds-input-field
  eds-kg-web-services-select --> eds-input-field
  eds-table --> eds-input-field
  style eds-input-field fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS