Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Input


import { Input } from '@proton/atoms';

Basic input html element wrapper with disabled/error states, styling, and input adornments.

If you are looking to wrap the input with labels or hint text, please see InputField.

() => {
    const [value, setValue] = useState('');

    const handleValue = (updatedValue: string) => setValue(updatedValue);

    return <Input placeholder="Placeholder" value={value} onValue={handleValue} />;
}

Controlled input

Use the value and onValue props to control the input.

The `disableChange` prop can be used to prevent the input value from updating. Try updating the value from the input below.

() => {
    const [value, setValue] = useState('');

    const handleValue = (updatedValue: string) => setValue(updatedValue);

    return (
        <>
            <Input placeholder="Placeholder" value={value} onValue={handleValue} />

            <p className="mb-1">
                The `disableChange` prop can be used to prevent the input value from updating. Try updating the value
                from the input below.
            </p>
            <Input disableChange placeholder="Placeholder" value={value} onValue={handleValue} />
        </>
    );
}

Error state

Use the error prop to add error styling.

Disabled state

Use the disabled prop to disable the input. This prevents the user interacting with the input and adds disabled styling.

Note the disabled styling added to the prefix and suffix

@protonmail.com

Unstyled

Use the unstyled prop to remove any default styling.

Adornments

Use the prefix and suffix props to adorn the input.