Theme:
Ui3nInput
Text input component with validation, icons, states, and various customization options.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
modelValue* | string | "" | Input value |
label | string | undefined | "" | Input label |
type | "text" | "password" | undefined | "text" | Input type |
size | "regular" | "large" | undefined | "regular" | Input field size (height) |
placeholder | string | undefined | "" | Input placeholder |
clearable | boolean | undefined | false | Whether input is clearable |
autofocus | boolean | undefined | false | Whether input is autofocus |
readonly | boolean | undefined | false | Whether input is readonly |
name | string | undefined | — | Input name attribute (for use in native forms) |
maxlength | number | undefined | — | Maximum length of input value |
minlength | number | undefined | — | Minimum length of input value |
autocomplete | string | undefined | "off" | Autocomplete attribute |
rules | ((v: unknown) => string | boolean)[] | undefined | [] | Validation rules |
validateAtStartup | boolean | undefined | false | Whether to validate at startup |
hideBottomSpace | boolean | undefined | false | Whether to hide bottom space |
displayStateMode | "error" | "success" | undefined | — | Display state mode |
displayStateWithIcon | boolean | undefined | false | Whether to display state with icon |
displayStateMessage | string | undefined | "" | Display state message |
disabled | boolean | undefined | false | Whether input is disabled |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
update:modelValue | value: string | — |
clear | | — |
enter | value: { value: string; altKey: boolean; ctrlKey: boolean; shiftKey: boolean; metaKey: boolean; } | — |
init | value: HTMLInputElement | — |
focus | value: Event | — |
blur | value: Event | — |
change | value: string | — |
input | value: string | — |
keydown | value: KeyboardEvent | — |
escape | value: Event | — |
update:valid | value: boolean | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#prepend-icon | — | Slot for prepend icon (displayed at the start of the input) |
#append-icon | — | Slot for append icon (displayed at the end of the input) |
Public Methods & Exposes
| Method Name | Signature / Type | Description |
|---|---|---|
inputElement() | HTMLInputElement | null | Reference to the input DOM element |
isDirty() | boolean | Whether the input has been modified |
isFocused() | boolean | Whether the input is currently focused |
clearValue() | () => void | Clear the input value |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-input-border-radius | 4px |
--ui3n-input-border-radius-large | var(--ui3n-input-border-radius, 8px) |
--ui3n-input-font-size | 13px |
--ui3n-input-font-size-large | var(--ui3n-input-font-size, 16px) |
--ui3n-input-height | 32px |
--ui3n-input-height-large | var(--ui3n-input-height, 48px) |
--ui3n-input-label-font-size | 12px |
--ui3n-input-message-font-size | 10px |
--ui3n-input-message-top | calc(var(--_input-height) + 16px + 2px) |
--ui3n-input-outer-padding-bottom | 15px |
--ui3n-input-outer-padding-top | 1px |
--ui3n-input-outer-padding-x | 1px |
--ui3n-input-padding-x | 8px |
--ui3n-input-padding-x-large | var(--ui3n-input-padding-x, 12px) |
Usage Examples
Basic usage
Basic usage
Simple input with v-model and placeholder
Label and sizes
Label and sizes
Input with label and different sizes: regular and large
Clearable input
Clearable input
Input with clear button using the clearable prop
Icon slots
Icon slots
Using prepend-icon and append-icon slots
Validation and states
Validation and states
Input validation with rules and display states (success, error)
Disabled and readonly
Disabled and readonly
Input in disabled and readonly states
Events
Events
Input events: input, change, enter, focus, blur, clear, escape