InputText is an extension to standard input element with icons and theming.
import { InputText } from 'primereact/inputtext';<InputText placeholder="Enter text" />'use client';
import { InputText } from 'primereact/inputtext';
export default function BasicDemo() {
return (
<div className="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.
'use client';
import { InputText } from 'primereact/inputtext';
export default function FilledDemo() {
return (
<div className="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.
'use client';
import { InputText } from 'primereact/inputtext';
export default function SizeDemo() {
return (
<div className="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.
'use client';
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="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.
'use client';
import { InputText } from 'primereact/inputtext';
export default function DisabledDemo() {
return (
<div className="flex justify-center">
<InputText placeholder="Disabled" disabled />
</div>
);
}