Inputs

A growing collection of 47/59 inputs components built with Svelte and Tailwind CSS.

Simple input

Required input *

Input with helper text

We won't share your email with anyone

Input with hint Optional

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

Number input with chevrons

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

mmddyyyy

Built with Bits UI DateField

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Date range picker

mmddyyyy

Built with Bits UI

Date range picker (unavailable dates)

mmddyyyy

Built with Bits UI

OTP input single

Built with Bits UI PIN Input

OTP input double

Built with Bits UI PIN Input

Phone number input

Built with svelte-tel-input

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

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 inputmask

Timestamp

Built with inputmask

Range

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Component not available

Want to contribute and make it happen?

Create this component

Discover/Contribute

Explore the original Origin UI or contribute by suggesting new components and improvements.

Visit Original Send Suggestion