Source: https://primereact.org/inputtext/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

InputText

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

Import#

import { InputText } from 'primereact/inputtext';

Copy

Basic#

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

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

Copy

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" />

Copy

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" />

Copy

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>

Copy

Float Label#

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

Username

<FloatLabel>
    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="username">Username</label>
</FloatLabel>

Copy

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

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

Copy

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<InputText invalid />

Copy

Disabled#

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

<InputText disabled placeholder="Disabled" />

Copy

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"/>

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the input. |

Import
Basic
Key Filter
Sizes
Help Text
Float Label
Filled
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek