Input Component

The Input component is a flexible, modern form input designed for SaaS applications. Perfect for React authentication UI, form builders, and SaaS dashboard interfaces. Built with Tailwind CSS for responsive design and supports multiple types (text, password, email, number, url, tel, search, textarea). Features include prefix/suffix icons, inline validation states, helper text, multiple sizes, and a password visibility toggle.

Import Component From Library

javascript

1import { Input } from "@neuctra/ui";

Basic Usage Code

Start with a simple input field. The component supports various input types including text, password, email, number, and textarea.

jsx

1import { Input } from '@neuctra/ui';
2
3function BasicExample() {
4  return (
5    <Input
6      label="Name"
7      placeholder="Enter your name"
8      onChange={(e) => console.log(e.target.value)}
9    />
10  );
11}

Basic Example

Name

Input Types

Password

Age

Message

Supports multiline input

States & Validation

Error state

This field is required

Success state

Looks good!

Disabled input

Sizes

Small

Medium

Large

Props Table

All available props for the Input component.

Prop	Type	Default	Description
label	string	—	Label text for the input field.
name	string	""	Input name attribute.
type	"text" \| "password" \| "email" \| "number" \| "url" \| "tel" \| "search" \| "textarea"	"text"	Input type.
id	string	—	HTML id attribute for accessibility.
description	string	—	Descriptive text shown next to label.
placeholder	string	""	Placeholder text inside the input.
value	string	—	Controlled input value.
defaultValue	string	""	Initial value for uncontrolled usage.
onChange	(event) => void	—	Triggered when input value changes.
onFocus	(event) => void	—	Triggered when input gains focus.
onBlur	(event) => void	—	Triggered when input loses focus.
required	boolean	false	Marks field as required.
disabled	boolean	false	Disables the input.
readOnly	boolean	false	Makes input read-only.
error	string \| boolean	false	Shows error state or message.
success	boolean	false	Displays success state.
helperText	string	—	Helper text below the input.
icon	React.ElementType	—	Icon displayed inside the label.
prefix	string	—	Text shown before input value.
prefixIcon	React.ElementType	—	Icon before input content.
suffixIcon	React.ReactNode	—	Icon after input (ignored for password toggle).
min / max / step	number	—	Constraints for number input.
maxLength	number	—	Maximum character length.
rows	number	4	Textarea rows.
size	"sm" \| "md" \| "lg"	"md"	Input size variant.
wrapperClassName	string	—	Custom classes for wrapper.
labelClassName	string	—	Custom classes for label.
inputClassName	string	—	Custom classes for input.
textareaClassName	string	—	Custom classes for textarea.
prefixClassName	string	—	Custom classes for prefix.
suffixClassName	string	—	Custom classes for suffix.
helperTextClassName	string	—	Custom classes for helper text.
descriptionClassName	string	—	Custom classes for the description text next to the label.
wrapperStyle	CSSProperties	—	Inline styles for wrapper.
inputStyle	CSSProperties	—	Inline styles for input/textarea.
labelStyle	CSSProperties	—	Inline styles for label.

Common Mistakes

<Input type="textarea" rows={0} />

rows must be >= 1 for textarea rendering.

<Input type="number" min={10} max={5} />

min should always be less than max.

<Input id="email" label="Email" />

Always use label + id for accessibility.

Pro Tips

Use size prop for responsive layouts (sm, md, lg).
Use prefix/prefixIcon for visual context (currency, domain, etc).
Combine error/success with helperText for user feedback.
Always provide id and label for accessibility.
Use description prop to show optional/required hints.
Password inputs automatically include visibility toggle via Eye icon.
Controlled vs uncontrolled: use value or defaultValue.

Frequently Asked Questions

How do I install and import the Input component?

Install the @neuctra/ui package, then import it with: import { Input } from "@neuctra/ui";

What variants and sizes does Input support?

Input supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.

Is the Input component accessible?

Input is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.