Tailwind CSS Input Group

Easily extend inputs by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!

Sizes

Input groups stacked from small to large.

Small

Default

Large

Multiple stacked inputs.

First and last name

Add a leading icon inside input.

Email address

Add a trailing icon inside input.

Card number

Add a leading and trailing icon inside input.

Price

USD

Add an add-on in tandem with input.

Website URL

http://

Add an inline add-on inside input.

Website URL

http://

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

0.00

http://

http://

Add an inline leading select inside input.

Phone number

Add an inline leading add-on and trailing select inside input.

Price

Place any checkbox or radio option within an input group’s addon instead of text.

Search loading.