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.
Heads up!
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!
Trailing icon
Place an icon at the end of the field for status, hints, or secondary context.
Leading and trailing icons
Use icons on both sides when the field needs input context and a secondary cue.
Text add-on
Attach text before or after the field for prefixes, suffixes, or context labels.
Inline text add-on
Place supporting text inside the group while keeping the field compact.
Multiple add-ons
Combine several add-ons in one group, including text, controls, and mixed elements.
Trailing button add-ons
Attach buttons to the end of the field for actions like submit, copy, or trigger.
Leading button add-ons
Attach buttons to the start of the field when the action should come before the entry.
Leading inline select
Embed a leading select for grouped values such as country codes, units, or categories.
Leading add-on with trailing select
Combine a leading add-on with a trailing select for more structured compound inputs.
Checkbox and radio add-ons
Replace text add-ons with checkbox or radio controls when the choice belongs directly to the field.
Search input with loading
Show a loading indicator inside the search field while results or suggestions are being fetched.