e8-form-input
Updated on Sep 18, 2025 20 minutes to readA text input component with optional masking, transformations, and dynamic suggestion popper.
Overview
e8-form-input allows users to enter and edit text values with optional input masks, transformations, and suggestion poppers.
It supports lazy updates, type hints, and flexible alignment, as well as custom append and prepend slots.
<e8-form-input
v-model="vars.username"
label="Username"
placeholder="Enter your username"
tooltip="This will be your public name"
:options="['Admin', 'User', 'Guest']"
></e8-form-input>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| horizontal-alignment | Text alignment inside the input field. | E8TextHorizontalAlignment | — |
| label | Custom label text; set to false to hide label. | string | boolean | — |
| lazy-sync | Enables deferred value updates until change or blur. | boolean | false |
| mask | Input mask applied to the field. | string | '' |
| options | List of available options for suggestion popper. | Array<string | number | { value: string | number }> | — |
| placeholder | Placeholder text displayed inside the input. | string | — |
| readonly | Makes the input non-editable. | boolean | false |
| size | Size of the control. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed below the input. | string | — |
| transform | String transformation applied on input value (uppercase, lowercase). | string | — |
| typehint | Enables typehint mode with suggestion popper. | boolean | false |
| v-model | Two-way bound input value. | string | — |
| visible | Controls component visibility. | boolean | true |