Nayan UI - Input

An Input component is a user interface element that allows users to enter data, such as text, numbers, or selections. It typically includes various types, such as text fields, checkboxes, radio buttons, and dropdowns, providing flexibility for different data types. Input components are essential for forms and interactive applications, enabling users to submit information effectively and efficiently.

# Demo

Basic Inputs

Simple input fields with labels and placeholders.

Basic Input

Full Name

Read-only Input

Disabled Input

Input Types

Different input types for various data formats.

Email Address

Phone Number

Password

Birth Date

Amount

Website

Search

Address

Inputs with Icons

Enhanced inputs with icon elements for better UX.

Search

Email

Password

Username

Phone

Amount

Input States

Different states and validation examples.

Normal State

Focused State

Success State

Email format is correct

Error State

Please enter a valid email address

Warning State

Username should be at least 6 characters

Loading State

Validating input...

Input Sizes

Different input sizes for various use cases.

Small Input

Medium Input (Default)

Large Input

Custom Styled Inputs

Inputs with custom styling and themes.

Rounded Input

Borderless Input

Gradient Border

Shadow Input

Dark Theme Input

Colored Input

Form Integration

Inputs integrated within a complete form.

Helper Text and Validation

Inputs with helpful guidance and validation messages.

Username

Username must be 3-20 characters long and contain only letters, numbers, and underscores

Bio

0/150 characters

Required Field *

This field cannot be left empty

Product Code

Format: ABC-123 (3 letters, dash, 3 numbers)

Real-time Validation

Inputs with live validation feedback.

Email Validation

Password Strength

Current Values:

Email: Not entered

Password: Not entered

Search: Not entered

# Usage

# Attributes

Name	Type	Default	Details
id	string	Optional	You can pass id to create unique identifier.
label	React.ReactNode	Optional	Label for the input field.
labelClassName	string	' '	You can customise by passing tailwind classes.
inputClassName	string	' '	You can customise by passing tailwind classes.
wrapperClassName	string	' '	You can customise wrapper by passing tailwind classes.
error	React.ReactNode	Optional	Error message to display.
helperText	React.ReactNode	Optional	Helper text to display.
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Optional	Change event handler.

# Tags

Input