Input

An input field for forms.

Install

Run the following command to install the input component:

npx acc-nuxt add Input

Examples

Default

With info

This is an info message

Custom error

This is an error message

Loading

Password

Numeric

Numeric String

The value will be a string but only numbers, minus and dot are allowed.

File

Disabled

Left Icon

Right Icon

Custom Password Icon

Use the iconRight slot with showOrHidePassword and showPassword props to customize the password visibility toggle.

Custom styling

Use the class prop to add custom class to the input wrapper. Then select the class inside the .lev-input-wrapper to change the value of the CSS variables

Display formatter

Use the displayFormatter prop to format the underlying value for display. The input becomes read-only while keeping the raw value (e.g. an ISO date string) as the model.

Form

The input component can be used in a form

Form Text

Form default values

Form Email

Form Custom Regex

Form Number

Form Number String

The value will be a string but only numbers, minus and dot are allowed.

Form disappearing

If the input unmounts, the value will be lost. But we can use keepValueOnUnmount prop to keep the value.

Form Input with label

Form Display formatter

The displayFormatter prop works inside a form too. The raw value (e.g. an ISO date string) is what vee-validate stores, while the input shows the formatted date.

Form values: { "username": "John", "birthday": "2026-07-06" } | Form errors: {}

Slots

The input component provides the following slots for customization.

#iconLeft
Slot for rendering a custom icon on the left side of the input field.
#iconRight="{ showOrHidePassword: () => void, showPassword: boolean }"
Slot for rendering a custom icon on the right side of the input field. For password inputs, provides showOrHidePassword function to toggle visibility and showPassword boolean state.
#info
Slot for rendering custom info content below the input field.
#skeleton
Slot for rendering a custom skeleton content while the input is loading.

Props

The input component accepts the following props to customize its behavior.

type:string— optional
default:text
The type of the input. Can be any valid HTML input type or "numberString".
placeholder:string— optional
default:undefined
The placeholder text.
disabled:boolean— optional
default:false
When true, the input is disabled.
validate:boolean— optional
default:true
When true, uses vee-validate for form validation.
validateOnInput:boolean— optional
default:false
When true, also validates the field as the user types, not only on blur.
validateOnBlur:boolean— optional
default:true
When true, validates the field when it loses focus.
name:string— optional
default:undefined
The name attribute used for vee-validate field registration.
defaultValue:string | number | undefined— optional
default:undefined
The default value for the input field.
loading:boolean— optional
default:false
When true, displays a skeleton state on the input.
info:string— optional
default:undefined
Informational text displayed beneath the input.
defaultError:string— optional
default:undefined
The default error message from vee-validate useField.
customError:string— optional
default:undefined
A custom error message displayed beneath the input.
disabledErrors:boolean— optional
default:false
When true, prevents validation error messages from being displayed. The customError prop is still shown, as it is managed manually.
emptyValue:string | number | null— optional
default:null
The default empty value for number inputs when all digits are deleted (e.g., when backspacing a number input).
displayFormatter:(value: string | number | undefined | null) => string— optional
default:undefined
A function that formats the underlying value for display. When provided, the input becomes read-only while keeping the raw value as the model/form value.

CSS Variables

The input component can be customized using the following CSS variables.

--lev-input-wrapper-width
default:100%
Width of the input wrapper.
--lev-input-wrapper-display
default:flex
Display property of the input wrapper.
--lev-input-wrapper-flex-direction
default:column
Flex direction of the input wrapper.
--lev-input-wrapper-gap
default:8px
Gap between input and error/info messages.
--lev-input-padding
default:8px 12px
Padding inside the input field.
--lev-input-font-size
default:16px
Font size of the input text.
--lev-input-line-height
default:20px
Line height of the input text.
--lev-input-border-radius
default:5px
Border radius of the input corners.
--lev-input-border
default:1px solid #d9d9d9
Border style of the input.
--lev-input-bg
default:#ffffff
Background color of the input.
--lev-input-width
default:100%
Width of the input element.
--lev-input-transition
default:border-color 100ms ease-out, background-color 100ms ease-out
Transition effects for the input.
--lev-input-placeholder-color
default:#aaacad
Color of the placeholder text.
--lev-input-icon-left-padding
default:calc(12px + 16px)
Left padding when an icon is present on the left.
--lev-input-icon-right-padding
default:calc(12px + 16px)
Right padding when an icon is present on the right.
--lev-input-error-border-color
default:#df3923
Border color when the input has an error.
--lev-input-password-padding-right
default:48px
Right padding for password input to accommodate show/hide button.
--lev-input-disabled-color
default:#808080
Text color when the input is disabled.
--lev-input-disabled-bg
default:#d9d9d9
Background color when the input is disabled.
--lev-input-hover-border-color
default:#808080
Border color when hovering over the input.
--lev-input-bg-hover
default:#ffffff
Background color when hovering over the input.
--lev-input-focus-outline
default:1px solid #5298f5
Outline style when the input is focused.
--lev-input-focus-outline-offset
default:-1px
Outline offset when the input is focused.
--lev-input-left-icon-left
default:8px
Left position of the left icon.
--lev-input-right-icon-right
default:8px
Right position of the right icon.
--lev-input-show-password-border-radius
default:5px
Border radius of the show/hide password button.
--lev-input-show-password-focus-outline
default:1px solid #5298f5
Outline style when the show/hide password button is focused.
--lev-input-show-password-focus-outline-offset
default:-1px
Outline offset when the show/hide password button is focused.
--lev-input-error-color
default:#df3923
Color of the error message text.
--lev-input-error-font-size
default:12px
Font size of the error message.
--lev-input-info-font-size
default:12px
Font size of the info text.
--lev-input-info-color
default:inherit
Color of the info text.
--lev-input-cursor
default:auto
Cursor style for the input element.

On This Page