InputText

InputText is an extension to standard input element with theming and keyfiltering.

Import#


import { InputText } from 'primereact/inputtext';

Basic#

InputText is used as a controlled input with value and onChange properties.


<InputText value={value} onChange={(e) => setValue(e.target.value)} />

Icons#

Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either .p-input-icon-left or p-input-icon-right class.


<span className="p-input-icon-left">
    <i className="pi pi-search" />
    <InputText placeholder="Search" />
</span>

<span className="p-input-icon-right">
    <i className="pi pi-spin pi-spinner" />
    <InputText />
</span>

Key Filter#

InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.


<InputText keyfilter="int" placeholder="Integers" />

Sizes#

Apply .p-inputtext-sm to reduce the size of the input element or .p-inputtext-lg to enlarge it.


<InputText type="text" className="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />
<InputText type="text" className="p-inputtext-lg" placeholder="Large" />

Help Text#

An advisory text can be defined with the semantic small tag.

UsernameEnter your username to reset your password.


<div className="flex flex-column gap-2">
    <label htmlFor="username">Username</label>
    <InputText id="username" aria-describedby="username-help" />
    <small id="username-help">
        Enter your username to reset your password.
    </small>
</div>

Float Label#

A floating label appears on top of the input field when focused.

Username


<span className="p-float-label">
    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="username">Username</label>
</span>

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.


<InputText className="p-invalid" />

Disabled#

When disabled is present, the element cannot be edited and focused.


<InputText disabled placeholder="Disabled" />

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


<Toast ref={toast} />
<InputText
    id="value"
    name="value"
    value={formik.values.value}
    onChange={(e) => {
        formik.setFieldValue('value', e.target.value);
    }}
    className={classNames({ 'p-invalid': isFormFieldInvalid('value') })}
/>

Hook Form#

React Hook Form is another popular React library to handle forms.


<Toast ref={toast} />
<Controller
    name="value"
    control={control}
    rules={{ required: 'Name - Surname is required.' }}
    render={({ field, fieldState }) => (
        <>
            <label htmlFor={field.name} className={classNames({ 'p-error': errors.value })}></label>
            <span className="p-float-label">
                <InputText id={field.name} value={field.value} className={classNames({ 'p-invalid': fieldState.error })} onChange={(e) => field.onChange(e.target.value)} />
                <label htmlFor={field.name}>Name - Surname</label>
            </span>
            {getFormErrorMessage(field.name)}
        </>
    )}
/>

Style#

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-inputtext	Input element

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

Screen Reader

InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.


<label htmlFor="firstname">Firstname</label>
<InputText id="firstname" />

<span id="lastname">Lastname</span>
<InputText aria-labelledby="lastname" />

<InputText aria-label="Age"/>

Keyboard Support

Key	Function
tab	Moves focus to the input.