Input

Input fields are essential for capturing user data. This component supports various states, icons, and affixes to cover common form use cases.

Props

PropTypeDefaultDescription
typestring'text'The input type (e.g., 'text', 'email', 'password').
errorbooleanfalseApplies error styling to the input field.
iconReact.Component-A component to render as an icon inside the input.
prefixstring-Text to display as a prefix inside the input.
suffixstring-Text to display as a suffix inside the input.

Examples

Basic Input

A standard input field with a placeholder.

<Input type="email" placeholder="you@example.com" />

Disabled State

The input can be disabled to prevent user interaction.

<Input type="text" placeholder="Disabled input" disabled />

Error State

Use the `error` prop to indicate a validation error.

<Input type="email" defaultValue="invalid-email" error />

With Icon

An icon can be passed to be displayed within the input.

import { EnvelopeIcon } from '...'; // Example icon import

<Input type="email" icon={EnvelopeIcon} placeholder="you@example.com" />

With Prefix

Add a text prefix to the input.

https://
<Input type="text" prefix="https://" placeholder="www.example.com" />

With Suffix

Add a text suffix to the input.

GB
<Input type="number" suffix="GB" placeholder="20" />