Input components built with React and Tailwind CSS

Simple input

Required input *

Input with helper text

We won‘t share your email with anyone

Input with hintOptional

Input with colored border and ring

Input with error

Email is invalid

Input with gray background

Disabled input

Input with start icon

Input with end icon

Input with start inline add-on

https://

Input with end inline add-on

.com

Input with inline add-ons

€EUR

Input with start add-on

https://

Input with end add-on

.com

Input with inline start and end add-on

€EUR

Input with start select

Input with end select

Input with end inline button

Input with end icon button

Input with end button

Input with button

Show/hide password input

Input with clear button

Search input with <kbd>

⌘K

Search input with icon and button

Search input with loader

Number input with plus/minus buttons

Built with React Aria

Number input with chevrons

Built with React Aria

File input

Input with overlapping label

Input with label animation

Input with inset label

Input with character limit

0/50

Input with characters left

8 characters left

Date input

mm

dd

yyyy

Built with React Aria

Time input

––

AM

Built with React Aria

Time input with start icon

––

AM

Built with React Aria

Time input with end icon

––

AM

Built with React Aria

Date and time input

mm

dd

yyyy

––

Built with React Aria

Date picker

mm

dd

yyyy

Built with React Aria

Date range picker

mm

dd

yyyy

mm

dd

yyyy

Built with React Aria

Date range picker (unavailable dates)

mm

dd

yyyy

mm

dd

yyyy

Built with React Aria

OTP input single

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Built with Input OTP

OTP input double

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Built with Input OTP

OTP input (spaced)

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Built with Input OTP

PhoneIcon number input

Built with react-phone-number-input

Card Number

Built with React Payment Inputs

Expiry date

Built with React Payment Inputs

Code

Built with React Payment Inputs

Card Details

Built with React Payment Inputs

Input with password strength indicator

Enter a password. Must contain:

At least 8 characters - Requirement not met
At least 1 number - Requirement not met
At least 1 lowercase letter - Requirement not met
At least 1 uppercase letter - Requirement not met

Read-only input

Copy to clipboard

Input with mask

Built with use-mask-input

Timestamp

Built with use-mask-input

Range

Input with tags

SportCodingTravel

Built with emblor

Input with inner tags

Red

Built with emblor

Amount

Paste Support

Try pasting multiple lines in any of these formats:

API_KEY=sk-1234567890
DATABASE_URL=postgresql://localhost
PORT=3000

Input

Didn't find what you were looking for?