Textfield
The e-text-field component is the base text input for forms and structured data capture across Nuvex UI. It supports visual variants, inner icons, prefix/suffix content, label behavior, and key states such as readonly, disabled, and clearable.
Use this page to compare interaction patterns quickly, compose richer inputs with named slots, and apply validation rules that keep forms clear, actionable, and production-ready.
Usage
Use this baseline playground to configure a Text Field in context: adjust color, outlined, clearable, counter/limit, readonly, disabled, and retain-color from one control panel.
Icons
Compare prependIcon and appendIcon with prependInnerIcon and appendInnerIcon in filled and outlined fields to choose the right visual weight for context, actions, and scanning.
Visual variants
Compare filled and outlined fields across interactive, readonly, and disabled states, then evaluate retain-color and floating-label behavior to define hierarchy and readability in real forms.
Named slots
Compose task-focused inputs with prepend, prepend-inner, append-inner, and append to place identity cues, quick actions, and secondary controls without losing field clarity.
Prefix and suffix
Use prefix and suffix to anchor fixed tokens like currency symbols, IDs, and units, so users read expected format at a glance and enter values with fewer errors.
Validation
Build end-to-end validation flows with rule-based feedback, error visibility, and submit-state control. This example uses a full registration card to show how field rules and action readiness work together in production forms.
Registration Form
Complete all required fields to continue
Props
Use the API table as the source of truth for props, accepted types, defaults, and behavioral notes when implementing Text Field variants in production.
| Property | Type | Default |
|---|---|---|
| modelValue | string | number | null | undefined |
Current input value. Supports controlled usage with v-model. | ||
| label | string | number | undefined |
Field label rendered in the control container. | ||
| placeholder | string | undefined |
Placeholder shown when there is no value and label behavior allows it. | ||
| disabled | boolean | false |
Disables interactions and applies disabled state styles. | ||
| readonly / inputReadonly | boolean | false |
Prevents editing while preserving focus/selection behavior. | ||
| clearable | boolean | false |
Shows clear action when the field has value and is interactive. | ||
| type | string | text |
Native input type. Common values include text, email, and password. | ||
| limit | string | number | undefined |
Maximum number of characters allowed in the input. | ||
| counter | boolean | false |
Displays character counter in details section. | ||
| prefix / suffix | string | undefined |
Text content rendered before or after the input value area. | ||
| prependInnerIcon / appendInnerIcon | IconPath | string | undefined |
Icon displayed inside the field frame at the start or end. | ||
| outlined | boolean | false |
Uses outlined visual variant for the field container. | ||
| color | string | primary |
Theme color applied to active state and accents. | ||
| rules / detailErrors | FieldRule[] | string[] | undefined |
Validation rules and explicit error messages for details state. | ||