InputText

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

Project NameUsed as the display name across your workspace

preview

Usage#

import { InputText } from '@primereact/ui/inputtext';

<InputText />

Examples#

Basic#

A plain text input with support for controlled and uncontrolled modes.

basic-demo

import { InputText } from '@primereact/ui/inputtext';

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <InputText placeholder="Enter text" />
        </div>
    );
}

Clear Icon#

Combine InputText with IconField to display a clear icon that resets the value when clicked.

clear-icon-demo

'use client';
import { Times } from '@primeicons/react/times';
import { IconField } from '@primereact/ui/iconfield';
import { InputText } from '@primereact/ui/inputtext';
import * as React from 'react';

export default function ClearIconDemo() {
    const [value, setValue] = React.useState('');

    return (
        <div className="flex justify-center">
            <IconField.Root>
                <InputText
                    className="w-56"
                    placeholder="Type something"
                    value={value}
                    onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
                />
                <IconField.Inset>
                    {value !== '' && <Times className="cursor-pointer" onMouseDown={(e) => e.preventDefault()} onClick={() => setValue('')} />}
                </IconField.Inset>
            </IconField.Root>
        </div>
    );
}

Sizes#

InputText provides small and large sizes as alternatives to the base by setting the size property.

sizes-demo

import { InputText } from '@primereact/ui/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>
    );
}

Filled#

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

filled-demo

import { InputText } from '@primereact/ui/inputtext';

export default function FilledDemo() {
    return (
        <div className="flex justify-center">
            <InputText placeholder="Enter text" variant="filled" />
        </div>
    );
}

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. This style is useful when integrating with form validation libraries.

invalid-demo

'use client';
import { InputText } from '@primereact/ui/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>
    );
}

Disabled#

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

disabled-demo

import { InputText } from '@primereact/ui/inputtext';

export default function DisabledDemo() {
    return (
        <div className="flex justify-center">
            <InputText placeholder="Disabled" disabled />
        </div>
    );
}

API#

Sub-Components#

See Primitive API for InputText component documentation.

Hooks#

See Headless API for useInputText hook documentation.

Accessibility#

See InputText Primitive for WAI-ARIA compliance details and keyboard support.