Input

input-01

Simple input

input-02

Required input *

input-03

Input with helper text

We won‘t share your email with anyone

input-04

Input with hintOptional

input-05

Input with colored border and ring

input-06

Input with error

Email is invalid

input-07

Input with gray background

input-08

Disabled input

input-09

Input with start icon

input-10

Input with end icon

input-11

Input with start inline add-on

https://

input-12

Input with end inline add-on

.com

input-13

Input with inline add-ons

€EUR

input-14

Input with start add-on

https://

input-15

Input with end add-on

.com

input-16

Input with inline start and end add-on

€EUR

input-17

Input with start select

input-18

Input with end select

input-19

Input with end inline button

input-20

Input with end icon button

input-21

Input with end button

input-22

Input with button

input-23

Show/hide password input

input-24

Input with clear button

input-25

Search input with <kbd>

⌘K

input-26

Search input with icon and button

input-27

Search input with loader

input-28

Number input with plus/minus buttons

Built with React Aria

input-29

Number input with chevrons

Built with React Aria

input-30

File input

input-31

Input with overlapping label

input-32

Input with label animation

input-33

Input with inset label

input-34

Input with character limit

0/50

input-35

Input with characters left

8 characters left

input-36

Date input

mm

dd

yyyy

Built with React Aria

input-37

Time input

––

AM

Built with React Aria

input-38

Time input with start icon

––

AM

Built with React Aria

input-39

Time input with end icon

––

AM

Built with React Aria

input-40

Date and time input

mm

dd

yyyy

––

Built with React Aria

input-41

Date picker

mm

dd

yyyy

Built with React Aria

input-42

Date range picker

mm

dd

yyyy

mm

dd

yyyy

Built with React Aria

input-43

Date range picker (unavailable dates)

mm

dd

yyyy

mm

dd

yyyy

Built with React Aria

input-44

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

input-45

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