InputText is an extension to standard input element with icons and theming.
import { InputText } from 'primereact/inputtext';<InputText placeholder="Enter text" />import { InputText } from 'primereact/inputtext';
export default function BasicDemo() {
return (
<div className="card flex justify-center">
<InputText placeholder="Enter text" />
</div>
);
}Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
import { InputText } from 'primereact/inputtext';
export default function FilledDemo() {
return (
<div className="card flex justify-center">
<InputText placeholder="Enter text" variant="filled" />
</div>
);
}InputText provides small and large sizes as alternatives to the base by setting the size property.
import { InputText } from 'primereact/inputtext';
export default function SizeDemo() {
return (
<div className="card flex flex-col items-center gap-4">
<InputText size="small" placeholder="Small" />
<InputText placeholder="Normal" />
<InputText size="large" placeholder="Large" />
</div>
);
}Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
import { InputText } from 'primereact/inputtext';
import * as React from 'react';
export default function InvalidDemo() {
const [value1, setValue1] = React.useState('');
const [value2, setValue2] = React.useState('');
return (
<div className="card flex flex-wrap gap-4 items-center justify-center">
<InputText value={value1} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue1(e.target.value)} placeholder="Enter text" invalid={value1 === ''} />
<InputText value={value2} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue2(e.target.value)} placeholder="Enter text" invalid={value2 === ''} variant="filled" />
</div>
);
}When disabled is present, the element cannot be edited and focused.
import { InputText } from 'primereact/inputtext';
export default function DisabledDemo() {
return (
<div className="card flex justify-center">
<InputText placeholder="Disabled" disabled />
</div>
);
}