Text input

Uses PrimeVue InputText and PrimeVue InputMask

When using a form input, please ensure that the label style is Sentence case.

Basic example

Required

Error state

Please enter a valid email address.

Success state

Success state with message

Your email address has been entered successfully.

Disabled state

Placeholder

Masked

This example uses an input mask to only allow entry of characters that match the format "(999) 999-9999".

Hidden label

In rare cases (e.g. a call-to-action banner on a marketing page), it is desirable to visually hide the input label and use the placeholder text to label the input. Below is an example of how to accomplish this.

Prefix icon

Context message above the field

Your password should be hard to guess.

Context message below the field

Your password should be hard to guess.

EsFormInput props

Name
v-model
Type
String
Default
n/a
Description
Required. The v-model directive binds the input to a data property.
Name
id
Type
String
Default
n/a
Description
Required. The id of the input.
Name
disabled
Type
Boolean
Default
false
Description
Specifies that the input should be disabled.
Name
label-sr-only
Type
Boolean
Default
false
Description
Specifies that the label should be visually hidden.
Name
required
Type
Boolean
Default
false
Description
Specifies that the input is required.
Name
state
Type
Boolean
Default
null
Description
Specifies the validity of the input. Can be true (success), false (error), or null (default).
Name
phone-mask-value
Type
String
Default
'(999) 999-9999'
Description
The mask value for the phone number input.
Name
type
Type
String
Default
'text'
Description
The type of input. Can be text, number, email, password, tel, or maskedTel.