This is a default text input built using react-aria and is styled using tailwind css and twMerge. It is accessible by default.

Technologies Used

TailwindCSS

Tailwind Merge

React Aria

Field Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Default Input with States

This is a default input field with various states that can be used to display error messages, disabled fields, and invalid fields. This makes the usage of the input field more flexible and easier to manage.

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputError Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the FieldError component.
...props	FieldErrorProps	-	Any additional props for the FieldError component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
state	"default" \| "isInvalid" \| "isDisabled"	"default"	The state of the input field (default, invalid, or disabled).
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
errorMessage	string	-	The error message to display if the input is invalid.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Input with Icon on the Left

The Input Component with Icon on the left seamlessly combines a text input field with an adjacent icon, enhancing user interaction by providing visual cues and streamlined functionality

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputError Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the FieldError component.
...props	FieldErrorProps	-	Any additional props for the FieldError component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
state	"default" \| "isInvalid" \| "isDisabled"	"default"	The state of the input field (default, invalid, or disabled).
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
icon	React.ReactNode	-	An icon to display inside the input field.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Input with Icon on the Right

The Input Component with Icon on the Right seamlessly combines a text input field with an adjacent icon, enhancing user interaction by providing visual cues and streamlined functionality

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputError Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the FieldError component.
...props	FieldErrorProps	-	Any additional props for the FieldError component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
state	"default" \| "isInvalid" \| "isDisabled"	"default"	The state of the input field (default, invalid, or disabled).
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
icon	React.ReactNode	-	An icon to display inside the input field, positioned on the right.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Floating Label Animation in Input Fields

A floating label input component enhances form usability by animating the label to float above the input field when the field gains focus or contains text. The animation provides a smooth, modern interaction experience for users.

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputError Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the FieldError component.
...props	FieldErrorProps	-	Any additional props for the FieldError component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
state	"default" \| "isInvalid" \| "isDisabled"	"default"	The state of the input field (default, invalid, or disabled).
label	string	-	The label for the input field, with animation effects.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Input with Password Toggle

A toggle password input enhances usability by allowing users to reveal or conceal entered password characters with a simple interaction, such as clicking an icon. This feature improves user experience by providing flexibility to verify password accuracy before submission, while maintaining security by obscuring the password by default.

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputError Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the FieldError component.
...props	FieldErrorProps	-	Any additional props for the FieldError component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
state	"default" \| "isInvalid" \| "isDisabled"	"default"	The state of the input field (default, invalid, or disabled).
label	string	-	The label for the input field, with animation effects.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Default Lined Input

An input field with just a bottom line simplifies the appearance by removing side and top borders. It looks clean and modern, focusing on clarity and ease of use while fitting well with minimalist design styles.

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Lined Input with States

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputError Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the FieldError component.
...props	FieldErrorProps	-	Any additional props for the FieldError component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
state	"default" \| "isInvalid" \| "isDisabled"	"default"	The state of the input, which affects styling.
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Default Input with Label Inside

This input component features a label positioned inside the input field itself. By placing the label within the input, it saves space in the UI and provides immediate context for the user. This design pattern can create a clean, modern look while maintaining clarity on the input's purpose.

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

Input Props

Name	Type	Default	Description
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Input with Label Inside and States

Technologies Used

Name	Type	Default	Description
className	string	-	Additional classes to apply to the TextField component.
...props	TextFieldProps	-	Any additional props for the TextField component.

InputLabel Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the Label component.
...props	LabelProps	-	Any additional props for the Label component.

InputBox Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the ReactAriaInput component.
...props	ReactAriaInputProps	-	Any additional props for the ReactAriaInput component.

InputError Props

Name	Type	Default	Description
className	string	-	Additional classes to apply to the FieldError component.
...props	FieldErrorProps	-	Any additional props for the FieldError component.

Input Props

Name	Type	Default	Description
state	"default" \| "isInvalid" \| "isDisabled"	"default"	The state of the input (default, invalid, or disabled).
label	string	-	The label for the input field.
isRequired	boolean	-	Whether the input field is required.
isReadOnly	boolean	-	Whether the input field is read-only.
className	string	-	Additional classes to apply to the Field component.
...props	InputProps (extends ReactAriaInputProps)	-	Any additional props for the Field component.

Checkout the default documentation of React Aria Input

Get Started

Primitives

Components

Hooks

Get Started

Primitives

Components

Hooks

Technologies Used

Default

Error

Disabled

ReadOnly

Technologies Used

Technologies Used

Technologies Used

Technologies Used

Technologies Used

Technologies Used

Default

Error

Disabled

ReadOnly

Technologies Used

Technologies Used

Default

Error

Disabled

ReadOnly

Technologies Used

Get Started

Primitives

Components

Hooks

Get Started

Primitives

Components

Hooks

Technologies Used

DefaultArrow icon

ErrorArrow icon

DisabledArrow icon

ReadOnlyArrow icon

Technologies Used

Technologies Used

Technologies Used

Technologies Used

Technologies Used

Technologies Used

DefaultArrow icon

ErrorArrow icon

DisabledArrow icon

ReadOnlyArrow icon

Technologies Used

Technologies Used

DefaultArrow icon

ErrorArrow icon

DisabledArrow icon

ReadOnlyArrow icon

Technologies Used

Default

Error

Disabled

ReadOnly

Default

Error

Disabled

ReadOnly

Default

Error

Disabled

ReadOnly