1. Basic Forms
  2. Input Group

Components

Tailwind CSS Input Group - Preline UI

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

Sizes

Input groups stacked from small to large.

Small
Default
Large

Multiple inputs

Multiple stacked inputs.

First and last name
First and last name

Leading icon

Add a leading icon inside input.

Trailing icon

Add a trailing icon inside input.

Leading and trailing icon

Add a leading and trailing icon inside input.

$
USD

Add-on

Add an add-on in tandem with input.

http://

Inline add-on

Add an inline add-on inside input.

http://

Multiple add-on

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

$
0.00
$
0.00

Trailing button add-ons

http://

Leading button add-ons

http://

Inline leading select

Add an inline leading select inside input.

Inline leading add-on and trailing select

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

$

Checkbox and radios

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

Search box with loading

Search loading.

Loading...
http://